Le opacity
style affecte tout l'élément et tout ce qu'il contient. La bonne réponse à cela est d'utiliser une couleur d'arrière-plan rgba à la place.
Le CSS est assez simple:
.myelement {
background: rgba(200, 54, 54, 0.5);
}
... où les trois premiers nombres sont les valeurs rouge, verte et bleue de votre couleur d'arrière-plan, et le quatrième est la valeur du canal «alpha», qui fonctionne de la même manière que la opacity
valeur.
Consultez cette page pour plus d'informations: http://css-tricks.com/rgba-browser-support/
L'inconvénient, c'est que cela ne fonctionne pas dans IE8 ou une version inférieure. La page que j'ai liée ci-dessus répertorie également quelques autres navigateurs dans lesquels elle ne fonctionne pas, mais ils sont tous très anciens maintenant; tous les navigateurs en cours d'utilisation sauf IE6 / 7/8 fonctionneront avec les couleurs rgba.
La bonne nouvelle est que vous pouvez également forcer IE à travailler avec cela, en utilisant un hack appelé CSS3Pie . CSS3Pie ajoute un certain nombre de fonctionnalités CSS3 modernes aux anciennes versions d'IE, y compris les couleurs d'arrière-plan rgba.
Pour utiliser CSS3Pie pour les arrière-plans, vous devez ajouter une -pie-background
déclaration spécifique à votre CSS, ainsi que le behavior
style PIE , afin que votre feuille de style finisse par ressembler à ceci:
.myelement {
background: rgba(200, 54, 54, 0.5);
-pie-background: rgba(200, 54, 54, 0.5);
behavior: url(PIE.htc);
}
J'espère que cela pourra aider.
[ÉDITER]
Pour ce que ça vaut, comme d'autres l'ont mentionné, vous pouvez utiliser le filter
style d'IE , avec le gradient
mot - clé. La solution CSS3Pie utilise en fait cette même technique dans les coulisses, mais vous évite d'avoir à jouer directement avec les filtres d'IE, de sorte que vos feuilles de style sont beaucoup plus propres. (il ajoute également tout un tas d'autres fonctionnalités intéressantes, mais ce n'est pas pertinent pour cette discussion)