Opacité au background du content
Résolu
ickyknox
Messages postés
1344
Statut
Membre
-
ickyknox Messages postés 1344 Statut Membre -
ickyknox Messages postés 1344 Statut Membre -
Bonjour,
je cherche à mettre de l'opacité à la couleur de background du content.
J'ai rédigé ca :
mais le problème c'est que l'opacité s'applique aussi aux div.
Y a t-il un moyen de l'éviter svp ?
je vous remercie
je cherche à mettre de l'opacité à la couleur de background du content.
J'ai rédigé ca :
.content {
position:relative;
border-color : #333333;
border-width: 2px;
border-style: solid;
border-radius: 1ex;
padding: 10px 0;
width: 860px;
height: 670px;
background-color:white;
z-index:1;
/* These three lines are for transparency in all browsers. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=10);
opacity:.5;}
mais le problème c'est que l'opacité s'applique aussi aux div.
Y a t-il un moyen de l'éviter svp ?
je vous remercie
2 réponses
-
Salut
cela s appelle l heritage CSS parent -enfant
https://www.alsacreations.com/tuto/lire/545-Comprendre-l-heritage-et-la-parente-des-styles-CSS.html
en clair les valeurs donnees a une div affecte tout les elements contenu dans cette div !
cela peu ce faire , mais il faut sortir les enfants de la div parent , puis positionner l ancienne div parent en position absolute; et z-index :-1
ensuite ajuster les enfants pour les superposer !
enfin une galere si tu part d un site deja fait !!!
on peu le faire avec aussi avec le rgba , mais IE inferieur a 8 ne passe pas !et meme pour le 8 il faut bidouiller !
un ecemple<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title> opacité </title> <!-- saved from url=(0013)about:internet --> <style type="text/css"> /*<![CDATA[*/ BODY{ background-color: #3333CC; } /*Le content a une opacité de 0.5 (mode de couleur rgba)*/ #content { border: 2px solid #333333; border-radius: 1ex; padding: 10px 0; width: 860px; height: 670px; background: #ffffff;/*pour IE<9 qui ne reconnait pas le rgba*/ background: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.5); /*pour IE inferieur a IE9*/ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); filter:alpha(opacity=50); } /*Le petit conteneur B a une opacité de 1*/ #B { position: relative; width: 860px; height: 350px; background: #000000;/*pour IE<9 qui ne reconnait pas le rgba*/ background: rgba(0, 0, 0, 1); background-color: rgba(0, 0, 0, 1); color: #FFFFFF; } /*]]>*/ </style> </head> <body> <div id="content"> <div id="B"> <p> DIV OPAQUE </p> </div> </div> </body> </html>
a+
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣ -
merci beaucoup rad zone ! en effet ca a fonctionné !
merci pout tout le mal que tu t'es donné !
