Opacité au background du content
Résolu
ickyknox
Messages postés
1156
Date d'inscription
Statut
Membre
Dernière intervention
-
ickyknox Messages postés 1156 Date d'inscription Statut Membre Dernière intervention -
ickyknox Messages postés 1156 Date d'inscription Statut Membre Dernière intervention -
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
A voir également:
- Opacité au background du content
- Windows 7 logon background changer - Télécharger - Thèmes & Fonds d'écran
- Content spinning logiciel - Télécharger - Traitement de texte
- Je suis content que tu vas bien ou que tu ailles bien - Forum Réseaux sociaux
- Background task host c'est quoi ✓ - Forum Windows
- Starter background changer - Télécharger - Thèmes & Fonds d'écran
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
a+
♣ La plus grande erreur que puisse faire un homme est d'avoir peur d'en faire une. ♣
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. ♣