28173 sujets

CSS et mise en forme, CSS3

Supprimer un effet de transparence

Bonjour,

Je souhaite créer un div transparent (div2) sur lequel je créé un autre div (div3) mais mat.

Je n'arrive pas à supprimer l'effet de transparence du div3.

Ma page :

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body onClick="document.getElementById('div2').style.display='block';">
<div id="div1" style="background:grey">
<div id="div2" class="div2" style="display:none" onClick="this.style.display='none';">

<div id="div3" class="div3">

</div>
</div>
<h1>Titre</h1>
<p>Texte</p>
</div>
</body>
</html>


Mon css:

.div2 { 
        position: absolute;
        top: 5;
        left: 5;
        background: green;
        color: black;
        width: 90%;
        height: 90%;
        z-index: 150;
        filter:alpha(opacity=80);
        -moz-opacity:0.80;
        opacity: 0.80;

}

.div3 { 
        position: absolute;
        top: 20px;
        left: 20px;
        width: 100;
        height: 100;
        background: yellow;
        filter:alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
}


Le but étant de remplacer le div3 par une photo. Je ne veux pas d'effet de transparence sur la photo.

Quelqu'un à une idée ?

Merci pour votre aide,
Frédéric.
Administrateur
kikx a écrit :
Je suppose que tu as essayé : de mettre "opacity:1;-moz-opacity:1" dans le div3 ?

Hello, il y'a un bouton "éditer" pour éviter de poster plusieurs messages lorsqu'on a fait une faute Smiley cligne
Salut,

en fait ça n'est pas possible car la transparence s'applique à tous les éléments contenus dans ton div2. C'est comme ca, tu peux rien y faire.

Maintenant tu as plusieurs solutions :

- tu peux ne pas placer ton div3 dans ton div2 et par un jeu de positionnement, venir placer ton div3 au dessus de ton div2...

-tu peux utiliser un PNG transparent en fond de ton div2 et ne pas utiliser les propriétés CSS de transparence. Mais saches que tu devras avoir recours à un petit hack css pour que ce PNG soit bien interprété sous IE6
Merci. Je finissais par m'en douter, tu me le confirme.

Je vais placer mon div3 au dessus de mon div2, c'est plus simple.

Frédéric.
Sujet clos
Aller à