Pour qu'un élément contenu n'hérite pas de l'opacité de son contenant

**dev14** · 15/02/2012, 15h45

Bonjour,

j'ai un div A général avec une opacité à 0.9, je voudrais que le div B à l'intérieur du A soit à une opacité de 1. Mais je n'y arrive pas vu qu'il hérite de A sur l'opacité.

Savez vous comment je pourrais procéder?

Merci

**Tsilefy** · 16/02/2012, 03h42

Au lieu d'opacity, utilise la notation background: rgba() pour div A (et des png pour les images semi-transparentes du div A).

**Pauloscorps** · 21/02/2012, 15h49

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
div#B {
     opacity:1;
}

Devrait fonctionner.

**Bovino** · 21/02/2012, 16h16

Envoyé par Pauloscorps

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
div#B {
     opacity:1;
}

Devrait fonctionner.

Non, ça ne fonctionnera pas.

L'opacité d'un élément se répercute sur ses éléments enfants.
Préciser une opacité de 1 sur le div enfant signifie uniquement que ce 1 s'applique au niveau d'opacité du parent (c'est-à-dire 0.9).
Et il n'y a pas moyen de "réinitialiser" le niveau d'opacité.

**dev14** · 21/02/2012, 19h25

Mouai, c'est ce que je craignais

C'est dommage.

Pour les png j'aimerais éviter d'avoir à faire tout un tas de traffics. J'ai en fait une image en background du body et je voulais que le container principal contenu dans le body laisse passer un peu cette image avec une opacité de 0.8, et à l'intérieur de ce body qui dans mon exemple correspondrait au div A, je voulais rajouter des photos mais elles m'apparaissent avec la transparence du div A, et une image avec une l'image du background derrière, c'était totalement inesthétique.

du coup j'ai abandonné l'idée de faire de la transparence sur mon div A, c'est pas grave. Merci pour la confirmation.

**Muchos** · 22/02/2012, 05h26

Solution possible.

Exemple de code HTML :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!doctype html>
<html lang="fr">
	<head>
		<meta charset="utf-8" />
		<link href="/test.css" rel="stylesheet" />
		<title>Test opacité</title>
	</head>
	<body>
			<!--La boite B dans la boite A-->
			<div id="A">
				<div id="B"></div>
			</div>
	</body>
</html>

Exemple de CSS:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
/*Le gros conteneur A a une opacité de 0.6 (mode de couleur rgba)*/
#A {width: 80%; height: 20em; margin-left: 10%; background-color: rgba(50,50,50,0.6);}
/*Le petit conteneur B a une opacité de 1*/
#B {width: 40%; height: 20%; position: relative; left: 30%; top: 40%; background-color: rgba(50,50,50,1);}

Le résultat :

Pour qu'un élément contenu n'hérite pas de l'opacité de son contenant

CSS

Vue hybride

Discussions similaires

Partager

Partager