Transparenten Hintergrund
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
bild
browser
code
datei
definieren
effekt
element
erstellen
farbe
fazit
format
hintergrund
http
image
problem
schein
schrift
text
transparentes bild
transparenz
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
sotex schrieb:
ich würd mit css3 arbeiten statt mit moz-spezifischen css-befehlen.
http://www.css3.info/preview/opacity/
mit opacity kannst du das komplette element tranzparent machen. zur not amchste dann 2 übereinander wenn die schrift nicht tranzparent sein soll
Das ist ja schon und gut, aber bis CSS3 in den Browsern auch wirklich umgesetzt ist, dauert es noch ein wenig, immerhin ist noch nicht mal CSS2 komplett integriert! Bei diesem Effekt auf der Seite handelt es sich um ein Preview. Auch wenn die beiden Browser Firefox und IE Transparenz unterstützen, stellen sie dafür verschiedene Attribute zu Verfügung und nicht das was in CSS3 einheitlich benutzt werden soll: opacity.
[meine Informationen belaufen sich auf: http://www.drweb.de/csstechnik/css3.shtml]
Ich habs jetzt mal schnell ausprobiert. Also im FF3 funktioniert opacity sehr wohl, IE6 gehts nicht!
sotex schrieb:
Ja, das mti der Schrift hat mich genervt.
Meinste ich soll den Text außerhalb von Div machen?
Und den Backgroudn von Div dann transperent und den Text dann da raufschieben?
jap, würd dan den text in ein div oder span element machen
Das Problem schein wohl zu sein, dass die Transparenz sich auf das ganze Element bezieht. Man kann es auch leider nicht verschachteln z.b. so:
<div style="background: lightblue; width: 500px; height: 500px; opacity: 0.2;"> <div style="opacity: 1;">Text hier</div> </div>
Das liegt wahrscheinlich daran, dass sich opacity am "Eltern"-element ausrichtet und dieses dann als Null-Transparenz ansieht. Jedenfalls hats bei mir im FF3 nicht funktioniert.
Also bleibt einem nichts anderes übrig, als 2 Divs aufeinanderzulegen, etwa so
<div style="background: lightblue; width: 500px; height: 500px; opacity: 0.2; position: absolute;"></div> <div style="opacity: 1; position: absolute;">Text steht hier drin</div>
..und als Fazit: Es ist wesentlich einfach in der derzeitigen Situation ein leicht transparentes Bild zu erstellen und dann nur den Hintergrund definieren zu müssen;)
-
Das Problem schein wohl zu sein, dass die Transparenz sich auf das ganze Element bezieht. Man kann es auch leider nicht verschachteln z.b. so
Naja, irgendwie ist das doch klar das der das gesammte Element dann tranzparent setzt, alle folgetranzparenzen verwenden also den 0.2 wert als 1 wie du erwähnt hast :-)
..und als Fazit: Es ist wesentlich einfach in der derzeitigen Situation ein leicht transparentes Bild zu erstellen und dann nur den Hintergrund definieren zu müssen;)
für barrierefreie Seiten ja, für leute die konsequent solchen feetz wie bei IE 5.5 oder 6 nicht mitmachen wollen und dann leiber diese aussperren ist opacity leichter
weil, trotz allen ist png eine verlustfreie kompression und jpeg nicht, große transparente hintergründe im JPG-format währen also ideal
Beitrag geändert: 1.10.2008 13:31:42 von sotex
Beitrag geändert: 1.10.2008 13:32:09 von sotex -
Das Problem schein wohl zu sein, dass die Transparenz sich auf das ganze Element bezieht. Man kann es auch leider nicht verschachteln z.b. so
Naja, irgendwie ist das doch klar das der das gesammte Element dann tranzparent setzt, alle folgetranzparenzen verwenden also den 0.2 wert als 1 wie du erwähnt hast :-)
..und als Fazit: Es ist wesentlich einfach in der derzeitigen Situation ein leicht transparentes Bild zu erstellen und dann nur den Hintergrund definieren zu müssen;)
für barrierefreie Seiten ja, für leute die konsequent solchen feetz wie bei IE 5.5 oder 6 nicht mitmachen wollen und dann leiber diese aussperren ist opacity leichter
weil, trotz allen ist png eine verlustfreie kompression und jpeg nicht, große transparente hintergründe im JPG-format währen also ideal
ei sach mal... wieso doppelpost? Oo die edit-funktion is wohl n bissl buggy... sorry
Beitrag geändert: 1.10.2008 13:34:13 von sotex -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage