Discussion :

[metallos]

Hello

je cherche à créer une div avec un fond transparent et le texte lui opaque.
Pour cela (je me suis inspiré d'un tuto sur le site developer.mozilla.org)

le principe est d'avoir une div "conteneur" et à l'intérieur 2 div, une normale et l'autre transparente et qui contient le même texte (afin d'avoir exactement la même taille,vu que je ne connait pas la taille à l'avance : texte dynamique) qui sera superposée à la 1ère.
Le truc c'est que sur IE ca marche bien mais sur FF la div transparente est décalée ...

Voilà le code HTML :

<DIV class='NewsContent' id='DivNews1'>
<DIV class='NewsText'><p>bla bla</p><p>bla bla bla</p></DIV>
<DIV class='NewsBack'><p>bla bla</p><p>bla bla bla</p></DIV>
</DIV>



et le code CSS :

.NewsContent
{
position: relative;
}

.NewsText
{
position: absolute;
z-index: 2;
width: 100%;
height: 100%;
}

.NewsBack
{
background-color: silver;
filter: Alpha(opacity=20);
-moz-opacity: .20;
-khtml-opacity: 0.20;
opacity: .20;
width: 100%;
height: 100%;
}



Si vous voulez voir ce que ça donne allez cliquez sur News dans le menu sur mon site newsymphony.free.fr

Merci de votre aide

[mLk92]

un simple

Code :

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

background-color: transparent;

allié avec un :

Code :

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

color: black;

ne serait-il pas plus simple ?

[mael94420]

Si je comprend bien, tu voudrais que ton div s'agrandisse en fonction du texte à l'interieur.
Alors sur ce point IE est bien plus sympa que FF sauf qu'il ne respecte pas les normes W3C.
Il te faut donc créer une feuille de style special pour IE dans lequel ta class comportera l'attribut height et dans ta feuille de style principale (normalement au normes W3C) tu utilisera l'attribut min-height. de la meme maniere que height.