Transparenz
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
alpha
beispiel
bild
browser
code
container
definition
filter
gecko
hintergrund
http
info
kleinen stelle
oberen beispiel
schatten
schwarzen hintergrund
stelle
stufe
transparenz
url
-
Hallo,
Ich würde gerne wissen, ob man mit CSS auch die "Transparenz-Stufe", z.B. von einem Background, einstellen kann.
Das ganze Stelle ich mir so vor, dass man z.B. einen weißen Hintergrund hat, darüber an einer kleinen Stelle einen Div-Container positioniert, der einen schwarzen Hintergrund mit 50% Transparenz hat, sodass an dieser Stelle eine graue Fläche entstehen würde.
Es sollte natürlich auch funktionieren, wenn man nicht so wie im oberen Beispiel einen weißen Hintergrund hat, sondern ein Hintergrund-Bild, was dann durch den darüberliegenden schwarzen Hintergrund mit 50% Transparenz dunkler getönt wird.
Wer da etwas weiß, bitte posten...
MfG Mermadalis -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Abhängig vom Browser brauchst du
opacity: 0.0 bis 1; -moz-opacity: 0.0 bis 1; filter:alpha(opacity=0 bis 100);
-moz-opacity ist für ältere gecko-engine Browser, filter:alpha für den IE. Die Definition in CSS 3 lautet opacity und wird von fast allen modernen Browsern unterstützt. Mehr Infos -
tct schrieb:
Abhängig vom Browser brauchst du
opacity: 0.0 bis 1; -moz-opacity: 0.0 bis 1; filter:alpha(opacity=0 bis 100);
-moz-opacity ist für ältere gecko-engine Browser, filter:alpha für den IE. Die Definition in CSS 3 lautet opacity und wird von fast allen modernen Browsern unterstützt. Mehr Infos
und das arbeitet in allen Browsern? -
und das arbeitet in allen Browsern?
Im Prinzip ja, auch wenn die Umsetzung natürlich nicht immer gleich aussieht (wie das eben so ist), zB wird der in einem transparenten Bereich dargestellte Text browserabhängig auch transparant angezeigt, auch wenn man das mit aller Macht versucht zu verhindern. In dem verlinkten Beitrag geht es hauptsächlich um Bildtransparenz, aber ich habe es auch schon erfolgreich auf andere Dinge, wie z.B. zwei übereinander liegende DIVs angewendet. -
tct schrieb: Abhängig vom Browser brauchst du
opacity: 0.0 bis 1; -moz-opacity: 0.0 bis 1; filter:alpha(opacity=0 bis 100);
-moz-opacity ist für ältere gecko-engine Browser, filter:alpha für den IE. Die Definition in CSS 3 lautet opacity und wird von fast allen modernen Browsern unterstützt. Mehr Infos
Bei allen älteren Browsern kann auch "tricksen" indem man ein gif-Bild erstellt wo zB. Jeder 2te Pixel durchsichtig ist.
Beispiel:
http://www.cssplay.co.uk/layouts/frame.html (der Schatten an den Händen)
-vom selben Designer nochmal ein schönes opacity-Beispiel:
http://www.cssplay.co.uk/opacity/fadein.html
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
