5568 sujets

Sémantique web et HTML

[Résolu]Comment empêcher l'héritage de la transparence par le texte ?

Bonjour,
Mon problème est le suivant:
J'ai une balise DIV transparente par 'filter:alpha(opacity=40)' et j'aimerais insérer du texte par H4 à l'intérieur. Le problème c'est que celui-ci hérite de la transparence...Comment faire pour lui rendre une opacité de 100% ou 1 pour Firefox, ou Konqueror.

Merci
Modifié par zest (08 Jan 2007 - 01:21)
zest a écrit :
J'ai une balise DIV transparente par 'filter:alpha(opacity=40)' et j'aimerais insérer du texte par H4 à l'intérieur. Le problème c'est que celui-ci hérite de la transparence...Comment faire pour lui rendre une opacité de 100% ou 1 pour Firefox, ou Konqueror.

Si la transparence est uniquement obtenue avec une propriété non standard propre à Internet Explorer, elle ne devrait pas affecter Firefox ou Konqueror, si ?

De plus, attribuer une opacité globale affectera aussi bien les images de fond que les éléments de contenu (texte, images). Si on veut un fond transparent uniquement, eh bien on utilisera une image de fond transparente (en PNG-24). Compatible IE7, Firefox, Opera, Safari, etc. Pour IE6, il y a des moyens pour obtenir les transparence PNG, moyens qui ne sont pas parfaits mais qui suffiront peut-être.
En fait elle affecte bien Firefox car j'ai rajouté '-Moz-Opacity:0.4;opacity:0.4'
Je n'ai affecté la transparence qu'a une <DIV> dans le fichier .html.
En fait, j'ai une image en haut à gauche, et une <DIV> (le corps du site) qui empiète sur une partie de cette image. D'ou l'utilisation de la transparence pour en voir l'intégralité.

Effectivement ce filtre est propriétaire IE. Mais je trouve que le débat IE versus Firefox commence à dater...et j'utilise avec plaisir les deux Smiley smile

Donc ma question, est simple, mais je te remercie quand même de ta réponse.
Peut-on écrire normalement sur une <DIV> utilisant le filtre Alpha (opacity) ?

Merci de vos contributions
Effectivement c'est exactement ce que je veux (link de clb56)...mais...

Bon j'éclaircis mes propos, je ne suis pas sur de m'être bien expliqué Smiley smile
En fait je ne désire pas utiliser d'image png24 (si possible), je désire juste le fond de ma DIV transparent, en l'occurence un violet transparent.
Et écrire du texte en blanc par dessus, avec une opacité normale (c'est à dire 100% pou iE ou 1 pou les autres)

Le code HTML:

<body>
<div id="corps" style="filter:alpha(opacity=40);-Moz-Opacity:0.4;opacity:0.4">
<h4>Il faudrait ce texte en  opacité maximum</h4></div>
</body>

et le css qui va avec:

#corps {
	height: 400px;
	width: 700px;
	background-color: #6666CC;
	position: absolute;
	top: 100px;
	left: 230px;
	border: thin double #FFFFFF;
}


Mais si ce n'est pas possible...alors...c'est pas possible Smiley confused
Modifié par zest (07 Jan 2007 - 18:08)
Et que penses-tu de ça ?


XHTML :

<div id="toto">
<div>
<h4>Un h4 en opacité maximum</h4>
</div></div>

CSS :

#toto { opacity:0.4; background-color:#xxxxxx; }
#toto div { opacity:1; }


Ca la fait un peu divite mais ça t'évite de passer par des images...
QuentincC >

Si j'en crois l'implémentation de opacity dans Firefox 2 et Opera 9 (pas implémenté dans Konqueror 3.5 par contre), ça ne marche pas.

Le bloc parent aura une opacité à 40%, et le texte aura une opacité à 100%... de 40%, soit 40% également.

Et puis, je ne vois pas trop de problème à utiliser une image de fond en PNG24, vu que ce que l'on veut réaliser c'est un fond translucide. Smiley rolleyes
QuentinC a écrit :
Mpop > ben alors suffit de remplacer le 1 par 2.5 et le tour est joué

Une opacité à 250%, je suis pas sûr que ça soit possible... Smiley sweatdrop

À vrai dire, ça ne l'est pas. Voilà le test que je viens de réaliser (j'ai « un peu » poussé la taille du texte pour qu'on voie bien) :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Test transparence</title>
	<style type="text/css">
	body {background: red;}
	div {background: black; opacity: .5; padding: 1em;}
	div p {color: white; font-size: 5em; font-weight: bold;}
	.test0 {opacity: .5;}	
	.test1 {opacity: 1;}
	.test2 {opacity: 2;}
	</style>
</head>

<body>
<div>
	<p class="test0">Test opacité 0.5</p>
	<p class="test1">Test opacité 1</p>
	<p class="test2">Test opacité 2</p>
</div>
</body>
</html>

Les deuxième et troisième paragraphes (opacités respectives à 1 et à 2) auront exactement le même rendu avec Firefox 2 et Opera 9.
Modifié par mpop (08 Jan 2007 - 00:35)
mpop, très bon test !
Effectivement le rendu sous Firefox est OK (je n'ai pas Opéra et Konqueror), mais sous IE7 ce n'est pas ça !! Smiley eek
Et je pars du principe qu'il faut developper pou IE7-6 aussi bien que pour Firefox, même si ce dernier remporte mon adhésion. En effet la majorité des personnes dispose d'un de ces trois navigateurs et se contre-foutent de la guéguerre Krosoft versus Reste-du-monde-libre.
Par contre l'utilisation d'une image png24 est en effet un solution satisfaisante, quand au rendu et au poids.

QuentinC...ta solution n'est pas fonctionnelle...dommage Smiley ohwell
Bonjour,

Juste une idée, avec une image en background et un sandwich en absolute du genre:
<style>
#conteneur {
	background:green;
	width:500px;
	height:400px;
	margin:auto;
	position: relative;

}

#sous_centre{   
   position: absolute;
   width: 90%;
   left: 50%;
   margin-left: -45%;
   height: 90%;
   margin-top: 20px;
   background-color: #fff;
   opacity : 0.1;
   filter : alpha(opacity=10);
   z-index: 10;  
}


#centre{   
   position: absolute;
   width: 90%;
   left: 50%;
   margin-left: -45%;
   height: 90%;
   margin-top: 20px;

   z-index: 20;  
}

p{
	font-size: 3em;
	background:green;   
}

#centre p{ 
	  margin-top: 200px;
	  margin-left: 200px;
}

html>body  p{ 
	  background:none;
}

</style>

<body>
<div id="conteneur">
	<div id="sous_centre">
	<p> Meilleux voeux</p>
	</div>
	<div id="centre">
	<p>Pour 2007</p>
	</div>
</div>

Ca a l'air de fonctionner sous ces 3 navigateurs?
Attention avec z-index: tout dépend si le bloc situé en dessous de l'autre comporte des liens...
zest a écrit :
Effectivement le rendu sous Firefox est OK (je n'ai pas Opéra et Konqueror), mais sous IE7 ce n'est pas ça !! Smiley eek

Ben normal, vu que IE7 n'implémente pas la propriété opacity (et le but du test était d'en constater le comportement avec les navigateurs qui l'implémentent). À priori, opacity n'est pas encore utilisable en production... sauf si on peut avoir un équivalent via les filtres propriétaires... mais le manque de support des Konqueror et Safari (à confirmer) posera problème également.

Sinon, tu devrais installer Opera 9, tant qu'à faire : disponible pour toutes plateformes, et gratuit. Ça permet de tester en parallèle dans Firefox et Opera, ce qui permet (plus ou moins) de savoir, devant un comportement inattendu dans Firefox, si on a affaire à un comportement standard ou à un bug de Firefox.
a écrit :

QuentinC...ta solution n'est pas fonctionnelle...dommage

Dommage, ça aurait été tellement simple, pratique et logique.
Je vois bien l'utilité des tailles relatives héritantes de leurs contenu de plus haut niveau pour les textes, mais pour l'opacité je ne comprend pas vraiment à quoi ça leur sert...
S***ie d'héritage !

Suggestion à soumettre au W3C pour la sortie de CSS 27.0 qui sera supporté par firefox 4.5, opéra 11.0 et IE 48.7 : la possibilité d'utiliser des couleurs 32 bits (8 de plus pour le niveau de transparence)
Modifié par QuentinC (08 Jan 2007 - 05:38)
mpop a écrit :

... sauf si on peut avoir un équivalent via les filtres propriétaires... mais le manque de support des Konqueror et Safari (à confirmer) posera problème également.

Il existe une extension CSS pour ces 2 navigateurs:
-khtml-opacity:0.80;

Modifié par Hermann (08 Jan 2007 - 07:12)
Sujet clos
Aller à