Ich sehe in den CSS-Referenzen how to set image transparency und how to set a background image. Aber wie kann ich diese beiden kombinieren, um ein transparentes Hintergrundbild einzustellen?
Ich habe ein Bild, das ich gerne als Hintergrund verwenden möchte, aber es ist zu hell - ich möchte die Deckkraft auf etwa 0,2 reduzieren. Wie kann ich das tun?
#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;
}
Zwei Methoden:
<div>
, das position: absolute;
vor #main
und die gleiche Höhe wie #main
hat, dann das Hintergrundbild und opacity: 0.2; filter: alpha(opacity=20);
anwenden.Nun, die einzige CSS-Möglichkeit, nur Hintergrundtransparenz zu erreichen, ist über RGBa
, aber da Sie ein Bild verwenden wollen, würde ich vorschlagen, Photoshop oder Gimp zu verwenden, um das Bild transparent zu machen und es dann als Hintergrund zu verwenden.