J'utilise quelque chose de similaire au code suivant :
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Je m'attendais à ce que l'arrière-plan ait une opacité de 0,4 et le texte une opacité de 100 %. Au lieu de cela, ils ont tous deux une opacité de 0,4.
Les enfants héritent de l'opacité. Ce serait bizarre et incommode si ce n'était pas le cas.
Vous pouvez utiliser un fichier PNG translucide pour votre image d'arrière-plan, ou utiliser une couleur RGBa (a pour alpha) pour votre couleur d'arrière-plan.
Par exemple, un fond noir estompé à 50 % :
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
Je ferais quelque chose comme ça
<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;
}
Cela devrait fonctionner. Cela suppose que vous ayez besoin d'une image semi-transparente, et non d'une couleur (pour laquelle vous devriez utiliser rgba). On suppose également que vous ne pouvez pas modifier l'opacité de l'image au préalable dans Photoshop.
Cela s'explique par le fait que la division intérieure a une opacité égale à 100 % de celle de la division dans laquelle elle est imbriquée (qui a une opacité de 40 %).
Pour contourner ce problème, vous pouvez faire plusieurs choses.
Vous pouvez créer deux divisions distinctes comme suit :
<div id="background"></div>
<div id="bContent"></div>
Définissez l'opacité CSS souhaitée et d'autres propriétés pour l'arrière-plan et utilisez la propriété z-index ([z-index][1]) pour styliser et positionner la division bContent. Vous pouvez ainsi placer la division au-dessus de la division d'arrière-plan sans que l'opacité de celle-ci soit modifiée.
Une autre option consiste à utiliser [RGBa][2]. Cela vous permettra d'imbriquer vos divisions tout en obtenant une opacité spécifique à la division.
La dernière option consiste à créer simplement une image .png semi-transparente de la couleur souhaitée dans l'éditeur d'images de votre choix, de définir la propriété background-image sur l'URL de l'image et de ne pas avoir à vous soucier de la manipulation du CSS et de perdre la capacité et l'organisation d'une structure div imbriquée.
[1] : http://www.w3schools.com/cssref/pr_pos_z-index.asp [2] : http://css-tricks.com/rgba-browser-support/