CSS: Vererbung von Opacity
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
besseren veranschaulichung
bestimmte elemente
code
container
derzeitigen wissenstand
eigenschaft
element
halb transparentes rotes pixel
http
problem
rotem hintergrund
schwarze hintergrund
schwarzem hintergrund
schwarzen hintergrund
text
url
vererben
vererbung
wiederholenden hintergrund
-
Hallo zusammen.
Habe ein kleines Problem mit den Vererbungseigenschaften der CSS-Eigenschaft opacity, also der Deckkraft von Elementen.
Und zwar habe ich auf einer Seite mit schwarzem Hintergrund einen DIV-Container mit rotem Hintergrund. Dieser DIV-Container hat eine Deckkraft von 70%, weshalb der schwarze Hintergrund durch das Rot des Containers weiterhin zu sehen ist.
Nun befindet sich innerhalb dieses Containers noch ein Text-Element, dessen Farbe weiß ist. Da die opacity (70%) von dem DIV-Container allerdings an das Text-Element vererbt wird, wird dieses bedingt durch den durchscheinenden schwarzen Hintergrund nicht weiß, sondern in einem Grauton dargestellt (was bis zu diesem Zeitpunkt auch kein Problem darstellt).
Ich möchte aber nicht, dass das Text-Element in einem Grauton angezeigt wird, sondern möchte in dem halb-duchsichtigen Container einen undurchsichtigen Text haben. Mein Gedanke war daher, die vererbten opacity-Eigenschaften im neuen Element einfach rückgängig zu machen. Hier der CSS-Code von diesem Versuch:
.div-kiste { background: #FF0000; opacity: 0.5; -moz-opacity: 0.5; -webkit-opacity: 0.5; -o-opacity: 0.5; } .text-eintrag { color: #FFFFFF; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; -o-opacity: 1; }
Das Problem ist aber, dass die Vererbung dadurch nicht rückgängig gemacht wird, der Text wird weiterhin in grau statt weiß angezeigt.
Ich suche also nach einer Lösung, wie ich die Vererbung der Deckkraft von Elementen in CSS für bestimmte Elemente deaktivieren kann, sodass der DIV-Container weiterhin durchsichtig bleibt, der Text allerdings eine Deckkraft von 100% besitzt.
Hier noch das Beispiel auf meinem Webspace zur besseren Veranschaulichung:
http://mermadalis.lima-city.de/beispiel.html
Vielen Dank schonmal für alle Antworten!
mermadalis -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Nach meinem derzeitigen Wissenstand ist es leider nicht möglich die opacity Eigenschaft nicht zu vererben, oder zu überschreiben.
Möglichkeiten wären ein Halb Transparentes Rotes Pixel als sich wiederholenden Hintergrund für das div verwenden. Das ist auch die Standard herangehensweise.
Oder (Unschön!!!) du legst ein 2. div neben dem Text an und schiebst es mit Hilfe von position:absolute und den postions parametern (top, bottom etc.) einfach dahinter. -
Mach das Ganze einfach mit einem transparenten Hintergrund so wie icarusdawn angedeutet hat.
Da gibt es mittlerweile eine CSS3-Eigenschaft dafür: rgba(rot,grün,blau,alpha)
Du schreibst einfach
beim div.background: rgba(255,0,0,.5);
MfG
Dominic -
naturfit schrieb:
Du schreibst einfach
beim div.background: rgba(255,0,0,.5);
Das kannte ich noch gar nicht lol
geht das in allen Browsern? -
icarusdawn schrieb:
naturfit schrieb:
Du schreibst einfach
beim div.background: rgba(255,0,0,.5);
Das kannte ich noch gar nicht lol
geht das in allen Browsern?
http://css-tricks.com/examples/RGBaSupport/
Ein interessantes Fallback für IE:
http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
Eine andere Alternative wäre mit einem Backgroundimage zu arbeiten.
Beitrag zuletzt geändert: 1.8.2012 8:35:35 von sneppa -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
