Pour une simple couleur d'arrière-plan semi-transparente, les solutions ci-dessus (CSS3 ou images bg) sont les meilleures options. Toutefois, si vous ne voulez pas compter sur CSS3 ou si vous voulez faire quelque chose de plus sophistiqué (par exemple, animation, arrière-plans multiples, etc.), vous pouvez essayer la "technique du volet" :
<style type="text/css" media="all">
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
</style>
<p class="pane">
<span class="back" style="background: #0f0; opacity: 0.6;"></span>
<span class="cont">Pane lives here...</span>
</p>
Cette technique fonctionne en utilisant deux "couches" à l'intérieur de l'élément du volet extérieur :
- un (le "dos") qui s'adapte à la taille de l'élément du volet sans affecter le flux du contenu,
- et un autre (le "cont") qui contient le contenu et permet de déterminer la taille du volet.
Le site position: relative sur le volet est important ; il indique au calque arrière de s'adapter à la taille du volet. (Si vous avez besoin de la <p> pour qu'elle soit absolue, changez le volet d'une balise <p> à un <span> et envelopper tout ça dans une position absolue. <p> tag.)
Le principal avantage de cette technique par rapport aux techniques similaires énumérées ci-dessus est que le volet n'a pas besoin d'avoir une taille spécifique ; tel que codé ci-dessus, il s'adaptera à la largeur totale (disposition normale des éléments de bloc) et ne sera pas plus haut que le contenu. L'élément extérieur du volet peut être dimensionné comme vous le souhaitez, à condition qu'il soit rectangulaire (c'est-à-dire qu'un bloc en ligne fonctionnera, mais pas un simple bloc en ligne).
De plus, il vous donne une grande liberté pour l'arrière-plan ; vous pouvez mettre n'importe quoi dans l'élément arrière sans que cela n'affecte le flux du contenu (si vous voulez plusieurs sous-couches de taille normale, assurez-vous qu'elles ont également les paramètres suivants : position : absolute, width/height : 100%, et top/bottom/left/right : auto).
Pour permettre l'ajustement de l'insertion de l'arrière-plan (par le biais du haut/bas/gauche/droite) et/ou l'épinglage de l'arrière-plan (en supprimant l'une des paires gauche/droite ou haut/bas), il est possible d'utiliser le CSS suivant :
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
Tel qu'il est écrit, il fonctionne dans Firefox, Safari, Chrome, IE8+ et Opera, bien que IE7 et IE6 nécessitent des CSS et des expressions supplémentaires, IIRC, et la dernière fois que j'ai vérifié, la deuxième variation CSS ne fonctionne pas dans Opera.
Les choses à surveiller :
- Les éléments flottants à l'intérieur de la couche cont ne seront pas contenus. Vous devrez vous assurer qu'ils sont effacés ou contenus d'une autre manière, sinon ils glisseront hors du fond.
- Les marges vont sur l'élément pane et le rembourrage va sur l'élément cont. N'utilisez pas l'inverse (marges sur l'élément cont ou remplissage sur l'élément pane) ou vous découvrirez des bizarreries comme le fait que la page soit toujours légèrement plus large que la fenêtre du navigateur.
- Comme indiqué, l'ensemble doit être en bloc ou en ligne. N'hésitez pas à utiliser
<div> au lieu de <span> pour simplifier votre CSS.
Une démonstration en direct de la technique utilisée de manière intensive est disponible à l'adresse suivante :
J'espère que cela vous aidera.
21 votes
Malheureusement non, CSS3 vise à corriger ce problème avec le nouveau module de couleur, qui vous permettra de spécifier une valeur alpha chaque fois que vous indiquez une couleur. w3.org/TR/css3-color
77 votes
En fait, l'opacité des éléments enfants est multiplié par l'opacité de l'élément parent, qui n'est pas remplacée. Ainsi, par exemple, si l'élément
pL'opacité de l'entreprise était.6et lespanL'opacité de l'entreprise était.5alors l'opacité réelle du texte dans le span serait de0.3.0 votes
Cet exemple vivant est-il ce que nous avons réalisé dans cette réponse ? codepen.io/pablofiumara/pen/EIFaH
3 votes
Je suppose que oui, mais comme c'est le fond qui est translucide, vous n'avez même pas besoin du filtre/opacité : codepen.io/anon/pen/ksJug
0 votes
Pour MOINS - stackoverflow.com/questions/15250708/
0 votes
stackoverflow.com/questions/4997493/
7 votes
@chharvey qu'est ce qui est supposé se passer si je définis
opacity:.5pour le parent etopacity:2pour l'élément enfant ?15 votes
@Alexander, je suis heureux que vous ayez posé cette question. Mathématiquement, on pourrait penser que l'enfant reviendrait à une opacité de 1. Cependant,
opacity:2;est CSS invalide . La valeur de laopacitypropriété doit être compris dans l'intervalle inclusif [0,1].0 votes
Vous pouvez utiliser
background: rgb(#, #, #,*point flottant Nombre compris entre 0 et 1*.);Cela créera une opacité pour votre fond si vous souhaitez simplement utiliser une couleur.