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

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

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, 02h42

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, 14h49

Code :

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

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

Devrait fonctionner.

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

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, 18h25

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, 04h26

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 :

**Bovino** · 22/02/2012, 07h56

Attention toutefois qu'IE < 9 ne reconnait pas les couleurs en rgba, il faut donc doubler la déclaration afin de faire un fallback :

Code :

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

1
2
3
4
5
6
7
#A {
  width: 80%;
  height: 20em;
  margin-left: 10%;
  background-color: rgb(50,50,50);
  background-color: rgba(50,50,50,0.6);
}

**Muchos** · 22/02/2012, 15h24

Tout à fait ! Merci de l'avoir précisé.

Mais dans ce cas, j'imagine que le code "rgb" est consacré aux IE < 9… Et on se retrouve avec le même problème pour ces navigateurs, c'est-à-dire pas d'opacité… et retour aux solutions des png. Idem pour le svg, qui ne semble pas supporté sous IE < 9.

Néanmoins, c'est une bon réflexe que de prévenir la dégradation de la page.

**Bovino** · 22/02/2012, 15h52

Oui, c'est ça.
Tous les navigateurs interpréteront le mode rgb(), mais ceux qui reconnaissent rgba() écraseront cette déclaration alors que les autres se passeront de l'opacité.

**dev14** · 23/02/2012, 03h26

MILLE EXCUSES, j'avais mal lu la réponse de Tsilefy en fait c'est bien ça et ça fonctionne, merci Muchos car il faut effectivement passer l'opacité dans le rgba et merci Bovino de me prévenir pour IE qui me donne toujours autant de "bonheur". Merci aussi à Pauloscorps comme ça j'oublie personne.

J'ai mon html, body avec un background qui est un fond d'écran.

ensuite j'ai un container principal (divA) qui est centré avec une largeur de 1008px, pour lequel j'oublie la propriété opacity car je gère l'opacité dans le rgba, or le 4e paramètre du rgba gère l'opacité du background tandis que opacity gère l'opacité de l'élément tout entier. Du coup, pas la peine de réinitialiser le divB (qui est dans le divA).

ça m'apprendra à avoir toujours géré les couleurs en hexadécimal, le mode rgba me sauve sur ce coup.

Merci à tous et bonne journée

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

CSS

Discussions similaires

Partager

Partager