28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Peut-on avoir un div totalement transparent (sauf le texte qu'il contient) de manière à ne jamais occulter le background sur lequel j'aimerais appliquer des brushes, et que cette propirété appliquée aux div soit compatibles avec le w3c (et non les opacity)
backgound-color:transparent ne marche pas.

merci
Salut,

Chez moi cela fonctionne. voici une petite page de test pour 2 méthodes:

1) une DIV simple en transparence sur le body
2) une DIV en position absolute en transparence sur une autre div


<!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"> 
<head> 
<title>Chrome options test</title> 
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
 
<style type="text/css">
body
{
		background-color: #E0E0E0;
}

#bloc  
{ 
        font-weight : bold;  
        font-family : verdana;  
        font-size : 12px;
        /*background-color: transparent;*/ /*pour avoir la transparence avec le body*/
        background-color: #B0B0B0;
        width: 200px;
        height: 200px;
        padding: 5px;
        margin: 0;
        position: relative;
}

#trans
{
   width: 50px; height: 50px;
   position: absolute;
   background-color: transparent; /* pour avoir la transparence avec la div "bloc" */
   z-index: 2;
   top: 40px;
   left: 20px;
}

</style> 
 
</head> 
<body> 
    <div id="bloc">
    	Salut tout le monde!
    </div>
    <div id="trans">
    	juste un test
    </div>	
</body> 
</html> 


C'est testé avec FF3.6 et IE 8

Smiley edit
L'exemple ci-dessus indique une couleur de fond pour le body, mais cela fonctionne également avec une image.

La directive "background : transparent;", ne semble pas obligatoire car même sans j'ai bien la transparence.
Modifié par mamax (01 Mar 2011 - 11:13)
salut
j'ai refait avec ta css et ça marche, j'arrive pas à savoir pourquoi, peut-être parcque j'avais pas mis de z-index?
en tout cas merci.
Bonjour,

À vrai dire, "transparent" est la valeur par défaut de la propriété background-color.