Мога да видя в препратките към CSS как да задам прозрачност на изображението и как да задам фоново изображение. Но как мога да комбинирам тези две неща, за да задам прозрачно фоново изображение?
Имам изображение, което бих искал да използвам като фон, но то е твърде ярко - бих искал да намаля непрозрачността му до около 0,2. Как мога да направя това?
#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}
#main {
position: relative;
}
#main:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;
}
Два метода:
<div>
, който е position: absolute;
преди #main
и със същата височина като #main
, след което прилагате background-image и opacity: 0.2; filter: alpha(opacity=20);
.Единственият CSS начин за прозрачност само на фона е чрез RGBa
, но тъй като искате да използвате изображение, бих предложил да използвате Photoshop или Gimp, за да направите изображението прозрачно и след това да го използвате като фон.