CSS : transparence du texte différente de celle du fond

[captain_torche]

Bonsoir,

Je suis en train d'essayer de rendre le fond d'un paragraphe transparent, tout en gardant le texte de ce même paragraphe parfaitement opaque.

J'ai donc essayé "opacity: 0.5;", mais le fond et le texte sont atténués.

J'ai donc essayé de mettre le texte dans un span, mais rien n'y fait : même en forcant l'opacité du span ("opacity: 1 !important;"), le texte reste semi-transparent.

Comment faire ?

[Dadou]

le mieux est d'utiliser un png dont tu modifies l'opacité, et pour palier au bug de IE6 d'utiliser le js suivant (qui a justement l'avantage de gérer la transparence dans les background css :

// Chemin complet sans le nom de domaine de la page HTML vers les images appelées en CSS
var fixImgsPath = "/views/backoffice/interface/";

// Gestion des exceptions
var Exceptions = new Array();
//Exceptions[0] = "common_footer.png";
//Exceptions[1] = "image-autre.png";

// Execution au chargement de la page
	window.onload = function() {
		PngFixImg();
		PngFixBkground();
	} 

// Mise en transparence des <img /> PNG
function PngFixImg() {
	var arVersion = navigator.appVersion.split("MSIE")
	var version = parseFloat(arVersion[1])

	if ((version >= 5.5) && (document.body.filters)) 
	{
	   for(var i=0; i<document.images.length; i++)
	   {
		  var fixImg = document.images[i]
		  var fixImgName = fixImg.src.toUpperCase()
		  if (fixImgName.substring(fixImgName.length-3, fixImgName.length) == "PNG")
		  {
			 var fixImgID = (fixImg.id) ? "id='" + fixImg.id + "' " : ""
			 var fixImgClass = (fixImg.className) ? "class='" + fixImg.className + "' " : ""
			 var fixImgTitle = (fixImg.title) ? "title='" + fixImg.title + "' " : "title='" + fixImg.alt + "' "
			 var fixImgStyle = "display:inline-block;" + fixImg.style.cssText 
			 if (fixImg.align == "left") fixImgStyle = "float:left;" + fixImgStyle
			 if (fixImg.align == "right") fixImgStyle = "float:right;" + fixImgStyle
			 if (fixImg.parentElement.href) fixImgStyle = "cursor:hand;" + fixImgStyle
			 var strNewHTML = "<span " + fixImgID + fixImgClass + fixImgTitle
			 + " style=\"" + "width:" + fixImg.width + "px; height:" + fixImg.height + "px;" + fixImgStyle + ";"
			 + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
			 + "(src=\'" + fixImg.src + "\', sizingMethod='scale');\"></span>" 
			 fixImg.outerHTML = strNewHTML
			 i = i-1
		  }
		  //if
	   }//for
	}//if
}//function




// Mise en transparence des images PNG en background CSS
function PngFixBkground() {

	// Tableau des feuilles de styles
	var StyleSheets = document.styleSheets;

	// Boucle sur les feuilles de styles
	for(i=0; i<StyleSheets.length; i++)
		{
		// Si il s'agit d'Internet Explorer
		if(StyleSheets[i].rules)
			{
			Rules = StyleSheets[i].rules;

			// Boucle sur les règles de la feuille de style
			for(j=0; j<Rules.length; j++)
				{
				// Si la règle contient une propriété "background"
				if((Rules[j].style.background) || (Rules[j].style.backgroundImage) || (Rules[j].style.backgroundRepeat)){
					// Récupération des règles
					if(Rules[j].style.background){
						BkgroundfixImg = Rules[j].style.background.match('[a-z0-9_-]*\.png');
						BkgroundRepeat = Rules[j].style.background.match('repeat|repeat\-x|repeat\-y|no\-repeat');
					}
					else {
						BkgroundfixImg = Rules[j].style.backgroundImage.match('[a-z0-9_-]*\.png');
						BkgroundRepeat = Rules[j].style.backgroundRepeat;
					}

					// Prise en compte des exceptions
					var regex = new RegExp(BkgroundfixImg, 'g');
					var yatil = regex.test(Exceptions);

					// Si l'image de fond est un PNG
					if((BkgroundfixImg != null) && (yatil == false)){
						// Détermination du sizingMethod suivant la méthode de repétition de l'image
						if(BkgroundRepeat != null) {
							// Cas "Etirer"
							if((BkgroundRepeat == "repeat") || (BkgroundRepeat == "repeat-x") || (BkgroundRepeat == "repeat-y")) {sizingMethod = 'scale';}
							// Cas "Rogner"
							else {sizingMethod = 'crop';}							
						}

						// Retrait de l'image de fond
						Rules[j].style.backgroundImage = "url('../medias/spacer.gif')";

						// Application du filtre
						Rules[j].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + fixImgsPath + BkgroundfixImg + "', sizingMethod='" + sizingMethod + "')";

					} // if

					} // if

				} // for

			} // if

		} // for
}

[captain_torche]

Ca fait énormément de code pour une simple transparence !

S'il n'y a que ça, je vais abandonner l'idée, alors ...

[Dudu]

Salut captain !

Comment faire ?

Sur la théorie pure, c'est impossible.

La notion de cascade et d'héritage en CSS fait que l'opacité appliquée à un élément-parent ne peut pas être supprimée sur un élément-enfant (dans ton cas avec un <span>).

La propriété "opacity" et quelques autres fonctionnent de cette manière. Et c'est bien dommage.

Toutefois, il existe une astuce autre que l'utilisation d'un PNG. Personnellement je la trouve un peu sale mais c'est toujours mieux que rien.

Elle est très bien expliquée sur le le Mozilla Developer Center (qui est une mine d'or):

Astuces CSS: Fond translucide

[jmi]

Cela dépend du type de positionnement des div.

Avec des Divs en absolute on doit y arriver sans JS, on superpose ( z-index) 2 div. Celui du dessous sert pour le fond avec l'opacité et l'autre pour la partie texte en 100%.

[Dudu]

@ jmi : qui a parlé de JS ?

Ma méthode préconise justement le positionnement absolu.

PS: et surtout aucun <div> !

<div> est une balise qui n'a aucune valeur sémantique. Le moins de <div>, le mieux c'est.

[Satovo]

La notion de cascade et d'héritage en CSS fait que l'opacité appliquée à un élément-parent ne peut pas être supprimée sur un élément-enfant (dans ton cas avec un <span>).

La propriété "opacity" et quelques autres fonctionnent de cette manière. Et c'est bien dommage.

Toutefois, il existe une astuce autre que l'utilisation d'un PNG. Personnellement je la trouve un peu sale mais c'est toujours mieux que rien.

Elle est très bien expliquée sur le le Mozilla Developer Center (qui est une mine d'or):

Astuces CSS: Fond translucide

Mais est ce que CSS3 va pouvoir regler ce problème ou non ?

Et sinon _AT_Dadou: Le problème est que le JS peut-être désactivé ce qui te donne un affichage sale + un code très lourd.

Le JS n'est pas une bonne solution mais c'est dommage qu'on ne puisse pas le faire je m'étais déjà questinné sur ce problème.

[broadcastor]

Je pense pas que le probleme viendra de CSS3 mais plutot de IE, car avant qu'il gere ça.......;

[captain_torche]

Broadcastor : le souci ne vient pas d'IE, mais de tous les navigateurs qui, cette fois-ci, respectent très bien les spécifications CSS2.

Après un petit tour sur la toile, il semble qu'il ne soit pas possible de gérer actuellement la transparence autrement qu'avec un PNG transparent en fond.

Sinon, CSS3 a effectivement prévu le coup : http://www.w3.org/TR/css3-color/#rgba-color