Transparente Bilder

[Snewi133]

Hallo

ist es über CSS irgendwie möglich Bilder Transparent darzustellen?

Gruß

 

[Maik]

Hi,

ja das ist möglich:

img {
filter:alpha(opacity=50); /* IE */
-moz-opacity:0.5; /* Gecko-Browser */
opacity:0.5; /* Opera 9+ */
}

Ansonsten gibt es noch transparente bzw. semi-transparente PNGs.

 

[Snewi133]

Hi

muss ich denn vorher mit Photoshop die Transparenz einstellen und als png speichern und ganz normal einbinden oder passiert es durch den obengenannten Code vonn alleine bei allen bildern?

Gruß

 

[Maik]

Entweder erstellst du dir ein transparentes PNG und benötigst obiges Stylesheet überhaupt nicht, oder du wendest das Stylesheet auf ein "normales" (nicht-transparentes) Bild an.

 

[Snewi133]

Was ist wenn ich das img nicht anwenden und Bilder über das stylesheet einbinde?

Gruß

 

[Maik]

.box {
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
background:url(pfad/zur/grafik.jpg);
position:absolute;
}

<div class="box">test</div>

Der Haken an dieser Variante: sie funktioniert nur, wenn das Element absolut positioniert ist.

Weitaus eleganter und flexibler ist da ein transparentes PNG als Elementhintergrund.