Css Vererbung verhindern

...komplette Frage anzeigen

4 Antworten

Was passiert denn wenn du den darüber liegenden Elementen im CSS opacity:1 zuweist? Das sollte die Vererbung überschreiben.

Also wie kann ich die Vererbung der Transparenz unterbinden?

Überhaupt nicht. Opacitiy vererbt sich nun mal auf die Kindelemente, das kann nicht verhindert werden.

Wenn es sich nur um eine Hintergrundfarbe handelt verwende RGBa anstatt opacity. Wenn es sich um ein Hintergrungbild handelt verwende den Workaround mit position: relative.

http://www.highresolution.info/weblog/entry/transparente_hintergruende_mit_css/

So ist es. Als Alternative kann man auch einfach ein bereits transparentes PNG benutzen.

0

Poste mal bitte deinen Code, dann können wir dir mit Sicherheit einfacher helfen.

So wie ich das verstehe vererbt sich die Transparenz, richtig?

Aber ohne die HTML und CSS ist das nicht so einfach zu beantworten. Du entwickelst die Seite wahrscheinlich lokal, oder? ansonsten poste einfach mal en Link zum Projekt

Mir ist gerade beim herumprobieren noch eine mögliche Lösung eingefallen:

<div class="wrap"> 
   <p>Ich habe opacity: 1</p>  
</div>

css

.wrap {
  position: relative;
}
.wrap:before {
  content: " ";
  position: absolute;     
  background: url(//placehold.it/100x100/FF0000) repeat;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

Demo: http://codepen.io/anon/pen/jfAra

Hätte allerdings den Nachteil, dass man allen Elementen innerhalb des Wrappers einen z-index > 0 zuweisen muss, d.h. das hier fehlt noch:

.wrap > * {
  position: relative;
  z-index: 1;
}
0
@Dory1

Ich sollte mehr nachdenken bevor ich etwas schreibe. Es sollte reichen

position: relative;

auf den Wrapper und sämtliche Kind-Elemente anzuwenden. Z-Index braucht es nicht.

0

Was möchtest Du wissen?