Ich verwende etwas ähnliches wie den folgenden Code:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Ich hatte erwartet, dass dadurch der Hintergrund eine Deckkraft von 0,4 und der Text eine Deckkraft von 100 % erhält. Stattdessen haben beide eine Deckkraft von 0,4.
Kinder erben die Deckkraft. Es wäre seltsam und unpraktisch, wenn sie es nicht täten.
Sie können eine durchsichtige PNG-Datei für Ihr Hintergrundbild verwenden oder eine RGBa-Farbe (a für Alpha) für Ihre Hintergrundfarbe verwenden.
Beispiel: 50% verblasster schwarzer Hintergrund:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
Ich würde etwa so vorgehen
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.container::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('/path/to/image.png');
opacity: .4;
content: "";
z-index: -1;
}
Das sollte funktionieren. Dies setzt übrigens voraus, dass Sie ein halbtransparentes Bild benötigen und keine Farbe (für die Sie einfach rgba verwenden sollten). Es wird auch davon ausgegangen, dass Sie die Deckkraft des Bildes nicht einfach vorher in Photoshop ändern können.
Das liegt daran, dass das innere Div 100 % der Deckkraft des Divs hat, in dem es verschachtelt ist (das 40 % Deckkraft hat).
Um dies zu umgehen, gibt es ein paar Möglichkeiten, die Sie nutzen können.
Sie könnten zwei separate Divs wie folgt erstellen:
<div id="background"></div>
<div id="bContent"></div>
Legen Sie die gewünschte CSS-Deckkraft und andere Eigenschaften für den Hintergrund fest und verwenden Sie die z-index-Eigenschaft (z-index) zur Gestaltung und Positionierung des bContent-Divs. Damit können Sie das Div über dem Hintergrund-Div platzieren, ohne dass seine Deckkraft beeinträchtigt wird.
Eine weitere Möglichkeit ist RGBa. Damit können Sie Ihre Divs verschachteln und trotzdem eine div-spezifische Deckkraft erreichen.
Die letzte Möglichkeit besteht darin, einfach ein halbtransparentes .png-Bild in der gewünschten Farbe in einem Bildbearbeitungsprogramm Ihrer Wahl zu erstellen, die Eigenschaft background-image auf die URL des Bildes zu setzen, und schon müssen Sie sich keine Sorgen mehr machen, dass Sie sich mit CSS herumschlagen und die Fähigkeit und Organisation einer verschachtelten div-Struktur verlieren.