28172 sujets

CSS et mise en forme, CSS3

[Résolu]Rendre le brackground opaque mais pas le contenu

Bonjour,

Diverses recherches et tests infructueux ce matin, c'est pourquoi je me tourne vers vous ...

Je veux rendre le fond d'un bloc opaque, il existe pour cela 2 moyens à ma connaissance :
1- CSS avec les propriétés :
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;


Sauf que si je veux mettre du texte, celui même s'il est dans un autre div prends les propriétés transparente du parent Smiley sweatdrop et je n'ai pas trouvé de solution pour résoudre ce problème...

2- Utiliser un png 
	background: url('bg.png');


Cette seconde solution fonctionne parfaitement pour mettre du texte par dessus tout en ne gérant pas la transparence de celui ci ... mais les PNG ne passe pas bien avec IE Smiley rolleyes

Voici le code complet :

<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body{
	background-color: #D76BDE;
}

#main{
	margin: 150px;
	top: 150px;
	left: 150px;
}

div.bg_unbloc{
	background: url('bg.png');
	/*
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;
	*/
}

p.unbloc{
	margin:30px 40px;
	font-weight: bold;
	font-size: 14px;
	color: #000000;

}
</style>
</head>
<body>
<div id="main"> 
  <div class="bg_unbloc"> 
    <p class="unbloc">blablalbalbal<br>
      <br>
      <br>
      blablalbalbal<br>
      <br>
      <br>
      blablalbalbal</div>
  </p>
</div>
</body>
</html>

Modifié par dark_vidor (09 Jan 2010 - 14:25)
Ouaaaah, c'est la fête des informations obsolètes ce sujet. Smiley lol

Alors en vrac:
- -moz-opacity est inutile depuis belle lurette, à oublier;
- je n'en suis pas tout à fait sûr, mais je dirais que c'est le cas de -khtml-opacity également;
- la transparence PNG passe parfaitement dans IE, il n'y a que Papy IE6 qui soit à la ramasse là-dessus (forcément, vu son âge!);
- ton cde HTML n'a pas de Doctype, c'est pour la beauté du geste ou c'est une vraie bêtise?

Pour être clair, une couleur de fond translucide en CSS ça se gère ainsi:
background-color: rgba(255,255,255,.5); /* blanc opaque à 50% */

Comme Internet Explorer 6-8 ne supporte pas les couleurs RGBA, on peut effectivement se rabattre sur une image de fond en PNG, avec la couleur et le taux de transparence «en dur», donc. Reste le problème IE6, et là c'est simple: on s'en fout, et on utilise une couleur de fond opaque pour IE6. On ne va surtout pas s'emmerder avec des filtres DirectX AlphaImageLoader, qui ont plein d'effets secondaires chiants. Surtout que souvent on se retrouve, par ignorance, à les appliquer à toutes les versions d'IE confondues, alors qu'ils ne sont utiles que pour IE6.

Voili voilou.
Modifié par Florent V. (09 Jan 2010 - 14:27)
dark_vidor a écrit :
J'avais oublier IePngFix Smiley confused

Qui est de la merde. (Bah oui quoi, c'est du AlphaImageLoader appliqué automatiquement, parfois en bousillant le DOM à la volée. Du coup le pékin qui utilise ce script se retrouve avec les effets secondaires du filtre DirectX, mais n'est même pas au courant de ce qu'il se passe réellement, et au moindre pépin il est tout perdu.)

Il y a aussi DD_belatedPNG qui est une solution techniquement supérieure. Mais qui est un script «alpha», donc pas forcément très stable. Peut demander pas mal de tests pour s'assurer que ça marche bien.

Au final, la dégradation gracieuse pour IE6 (dont les parts de marché baissent lentement mais inlassablement) est la solution la plus robuste au problème du non-support de la transparence graduelle du PNG dans Papy IE6.
Modifié par Florent V. (09 Jan 2010 - 14:33)
ha? Smiley sweatdrop

heu c'était une page bidon pour essayer donc effectivement j'ai omis le doctype Smiley cligne
Modifié par dark_vidor (09 Jan 2010 - 14:33)
dark_vidor a écrit :
heu c'était une page bidon pour essayer donc effectivement j'ai omis le doctype Smiley cligne

Si tu fais tes pages de test sans Doctype, alors tu as soit un gros problème de rigueur, soit quelques lectures à faire. Smiley smile
Sujet clos
Aller à