{CSS} Transparence en cascade (Clubic.com)

_Raynor_

Problème résolu, voir réponse de DarKChAm (06 Mai 2008, 19h11)

J'ai un cadre de texte (<div id="page_contenu">) dont le fond est de couleur rouge, or derrière ce cadre, en fond de page (plus exactement sur un <div> conteneur global) j'ai une image de fond (background-image: url('fondConteneur.png');). Or j'aimerai que le fond rouge du cadre #page_contenu soit légèrement transparent pour qu'on puisse apercevoir l'image de fond "fondConteneur.png".
Le problème est qu'une transparence en CSS s'appliquer sur le fond mais également sur le contenu (le texte ou les images dans mon cas).
J'ai donc eu l'idée de faire un <div id="page"> intermédiaire entre #conteneur_global et #page_contenu : mais là encore ça ne résout pas mon problème car la transparence définie dans #page est héritée pour #page_contenu.
J'ai essayé d'appliquer une transparence de 1.0 à #page_contenu mais ça ne change rien.

J'ai donc le code suivant :

Code :

#conteneur_global {
	background-color: #000000;
	background-image: url('fondConteneur.png');
	background-repeat: no-repeat;
}

#page {
	background-color: #cc0000;
	opacity: 0.4;
	filter: alpha(opacity=40); /* Transparence pour IE */
}

#page_contenu {
	opacity: 1.0;
	filter: alpha(opacity=100); /* Transparence pour IE */
}

Code :

<div id="conteneur_global">
	<div id="page">
		<div id="page_contenu">Blablabla</div>
	</div>
</div>

Comment faire ?

Problème résolu, voir réponse de DarKChAm (06 Mai 2008, 19h11)
Edité le 22/03/2009 à 22:37

Sans-Nom

le 05 Mai 08 à 16h55

Je dirais que quand tu fais #page_contenu.opacity = 1.0, l'opacité réelle est opacité parente * #page_contenu.opacity ;

Si tu veux que ça marche, tu ne dois avoir que le positionnement absolu, ou dans ton cas, le fond transparent pour donner l'impression de transparence. Aussi, je ne sais pas s'il n'est pas possible de spécifier un fond avec une opacité (quand même pas background-opacity, mais bref)

Modérateur Logiciel - Programmation

_Raynor_

le 05 Mai 08 à 19h41

Je me disais la même chose concernant la formule :-/
J'ai cherché un background-opacity-like sans succès. Je vais voir ce qu'un PNG semi-transparent peut donner...

DarKChAm

Invaders must die.

le 05 Mai 08 à 22h14

Personnellement j'avais usé la méthode que Sans-Nom parle, à savoir d'utiliser de l'absolute, mais c'est rarement pratique.
Sinon il existe une autre méthode qui ressemble plus à du bidouillage qu'à du scripting : il suffit de définir la hauteur du conteneur du fond transparent, laisser ce div vide, et placer un div après avec le texte, en prenant comme marge supérieur la hauteur négative du div de fond.
Pas compris? Je m'explique :

Code :

<div style="background:#000000;">
<div style="opacity: 0.4; background:#FFFFFF; height:100px;"></div>
<div style="color:#FFFFFF; margin-top:-100px;">Salut Monde!</div>
</div>

Edité le 05/05/2008 à 22:14

_Raynor_

le 06 Mai 08 à 00h23

C'est pas mal (assez tordu mais simple) cependant cela à le gros défaut de fortement gêner la sélection du texte :-/

Un position: relative; avec un top: -100px; (pour reprendre l'exemple de DarKChAm) semble aller : je verrais cela demain avec le reste du code à côté (parce qu'il y a des float qui traînent).

_Raynor_

le 06 Mai 08 à 17h34

Évidemment position: relative; et float ne font pas bon ménage sous IE6 (Sous Firefox c'est OK) :-/

Je ne pense pas que je trouverais de fix pour combiner les deux je vais donc chercher à supprimer ce float (pourtant c'est la seule réponse au besoin d'afficher côte à côte texte et image :-/)...

Comme vous voyez, mettre un <div> intermédiaire ne règle pas le soucis.

Code :

<div id="a" style="">
	<div id="b" style="opacity: 0.4; filter: alpha(opacity=40); background: #FFFFFF; height: 250px;"></div>
	<div id="c" style="color: #FFFFFF; position: relative; top: -250px;">
		<div id="d">
			<div id="e" style="float: left;">Salut Monde !</div>
			<div id="f">Hello World!</div>
		</div>
	</div>
</div>

Edité le 06/05/2008 à 17:37

DarKChAm

Invaders must die.

le 06 Mai 08 à 19h11

_Raynor_ a écrit:
Évidemment position: relative; et float ne font pas bon ménage sous IE6 (Sous Firefox c'est OK) :-/

C'est ton "top" que IE ne connait pas ou interprète mal, personnellement je ne l'utilise jamais, privilégie le margin en css. L'exemple ci-dessous fonctionne (hormis que les div se chevauchent sous IE, mais ça c'est typique et il suffit de mentionner les hauteurs et largeurs de chaque éléments. Ainsi ton code fonctionnel ci-dessous :

Code :

<div id="a" style="">
 <div id="b" style="opacity: 0.4; filter: alpha(opacity=40); background: #FFFFFF; height: 250px;"></div>
 <div id="c" style="color: #FFFFFF; position: relative; height:250px; margin-top: -250px;">
  <div id="d">
   <div id="e" style="float: left; width:150px;">Salut Monde !</div>
   <div id="f" style="float: left; width:150px;">Hello World!</div>
  </div>
 </div>
</div>

Après tu peux aussi utiliser le code suivant :

Code :

<div id="a" style="">
 <div id="b" style="opacity: 0.4; filter: alpha(opacity=40); background: #FFFFFF; height: 250px;"></div>
 <div id="c" style="color: #FFFFFF; float: left; margin:-250px 0 0 0;">Salut Monde!</div>
 <div id="d" style="color: #FFFFFF; float: left; margin:-250px 0 0 150px;">Hello World!</div>
 <div style="clear:both;"></div>
</div>

Ce code est certes plus jolie et simple, mais il possède le désavantage que l'on utilise du margin-left sur un float-left, ce qui induit que IE<6 va doubler la valeur du margin... Je ne sais pas si tu as besoin d'agir de la sorte, mais au pire tu utilises un hack.
Edité le 06/05/2008 à 19:12

_Raynor_

le 06 Mai 08 à 20h59

Impeccable

Comment on fais pour avoir le bouton

(et donner des points à qui de droit) ? Il aurait fallut que je pose ma question via le portail Clubic ?

DarKChAm

le 06 Mai 08 à 21h20

Yep, je crains qu'il n'ait fallu passer par "Réponses d'Experts", m'enfin personnellement je ne cherche aucun point mais juste à partager mes connaissances

!

_Raynor_

le 06 Mai 08 à 21h41

DarKChAm > Je le sais bien (je ne filtre pas non plus les topics où je réponds selon ce critère) mais comme c'est la première question technique que je pose depuis un bail je voulais tester le système "Réponse d'Experts" et par la même souligner ses failles dont celle qui fait qu'à côté des "forumeurs-experts" primés toutes les semaines il y en a d'autre qui restent dans l'ombre sans pour autant moins aider

{CSS} Transparence en cascade

BE GEEK ! Avec