Puis-je attribuer la propriété opacity
à la propriété background
d'une div
uniquement et non au texte qui s'y trouve ?
J'ai essayé :
background: #CCC;
opacity: 0.6;
mais cela ne change pas l'opacité.
Il semble que vous vouliez utiliser un arrière-plan transparent, auquel cas vous pourriez essayer d'utiliser la fonction [rgba()
][1] :
rgba(R, G, B, A)
R (rouge), G (vert) et B (bleu) peuvent être des
<initiaux>
ou des<pourcentages>
, où le nombre 255 correspond à 100%. A (alpha) peut être un<nombre>
entre 0 et 1, ou un<pourcentage>
, où le nombre 1 correspond à 100% (opacité totale).
Exemple de RVBa
rgba(51, 170, 51, .1) / vert opaque à 10 % / rgba(51, 170, 51, .4) / 40% de vert opaque / rgba(51, 170, 51, .7) / 70% de vert opaque / rgba(51, 170, 51, 1) / vert opaque complet /
Un petit [exemple][2] montrant comment rgba
peut être utilisé.
En 2018, pratiquement **tous les navigateurs supportent la syntaxe rgba
.
[1] : https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgb()_et_rgba() [2] :
Le moyen le plus simple d'y parvenir est d'utiliser deux divs, un pour l'arrière-plan et un pour le texte :
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
Vous ne pouvez pas. Vous devez avoir une division séparée qui est juste l'arrière-plan, de sorte que vous pouvez seulement appliquer l'opacité à cela.
J'ai essayé de le faire récemment, et comme j'utilisais déjà jQuery, j'ai trouvé que la méthode suivante était la moins compliquée :
text
une couleur de fond unie, car ce sera la couleur par défaut sans JavaScript.text
, et appliquez-la à la division background
.Je suis sûr qu'il y a une sorte de méthode ninja CSS pour faire tout ça avec seulement des flottants ou quelque chose comme ça, mais je n'ai pas eu la patience de le découvrir.