propriété opacity<>z-indexe souci héritage

**turican2** · 24/11/2009, 19h04

Bonjour à tous,

j'ai un ennui de css, j'ai écrit du text par dessus une div que j'ai rendu transparente. Le texte semble hériter lui aussi de la propriété opacity, pourtant dans mon css le z-index devrait placer le texte devant et donc ne pas etre transparent.

mon fichier css d'exemple:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@CHARSET "ISO-8859-1";
body{
    background: black;
}
 
#image{
   position:relative;
   opacity:1;
   z-index:1;
}
 
#transparence{
   position:relative;
   top: -100px;
   left: 20%;
   background-color: white;
   padding: 50px;
   opacity:0.3;
   z-index: 10;
}
 
#duText{   
    position:relative;
    color: black;
    opacity:1;
    z-index:15;
    font-size:1.2em;
}

le html:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="./css/test.css" />
    </head>
<body>
<div id="image">
    <img src="images/gradien.png" width="1200" height="180" alt="gradien"/>
</div>
<div id="transparence">
<?php
echo'<div id="duText">';
echo("Salut les gens :)");
echo'</div>';
?>
</div>
</body>
</html>

je m'attendais à ce que le texte " Salut les gens

" soit noir, or celui ci est noir fade, comme ci la transparence de la div "transparence" s'appliquait à la place de "duText"

auriez vous une idée du pourquoi?

merci de vos réponses ou orientations

**vodiem** · 25/11/2009, 01h48

salut turican2,

Envoyé par turican2

comme ci la transparence de la div "transparence" s'appliquait à la place de "duText"

non pas à la place mais en plus.
ce qui me parait pratique: si tu veux appliquer une transparence à une div c'est l'ensemble qui est affecté sinon t'imagine ce serait fastidieux d'appliquer à chacun de ces enfants. remarque que l'idée qu'il pourrait hérité et que l'on pourrait forcer (!important) serait pratique, mais cela ne fonctionne pas ainsi puisque l'opacité est relative à la div parente.
il faut donc que tu englobe dans une principale les deux div et qu'elles soient enfants directes de celle-ci.

**turican2** · 25/11/2009, 10h24

oui ça fonctionne comme tu me l'indiques merci. ça va juste me forcer à faire du calcule de position mais c'est franchement pas gênant

merci beaucoup

**vodiem** · 25/11/2009, 10h49

Envoyé par turican2

ça va juste me forcer à faire du calcule de position

pas tant que cela: tu met sur la balise qui engloble une position relative et le rectangle blanc transparent (fils) en absolu.

**adiGuba** · 25/11/2009, 11h23

Salut,

opacity s'applique en effet à tous les éléments enfants, image et texte, et tu ne peux pas l'annuler dans le fils. En fait cela applique le filtre sur tous les éléments.

Par contre tu peux utiliser le code couleur rgba() pour utiliser une couleur transparente. L'intérêt c'est que tu peux limiter cela et l'appliquer à une seule propriété :

Par exemple pour une couleur de fond blanc avec 30% de transparence :

Code :

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

background-color: rgba(255,255,255, 0.3);

Seul problème : il faut un navigateur relativement récent (Firefox 3.0, Safari 3.1 ou Opera 10.0) et que ce n'est pas encore supporté par IE...

Une autre solution serait d'utiliser une image PNG d'un pixel transparent, que tu utiliserais en image de fond. C'est supporté depuis IE7 si je ne me trompe pas, mais attention sous IE6 cela peut avoir un résultat affreux selon l'image (fond gris/noir).

a++

**vodiem** · 25/11/2009, 11h30

adiGuba a tout à fait raison si tu n'a jusqu'une transparence à réaliser, c'est mieux de procéder ainsi.

ne pas oublié qu'opacity ne fonctionne pas avec tout les navigateurs sous ie c'est filter...

**adiGuba** · 25/11/2009, 11h38

Envoyé par vodiem

ne pas oublié qu'opacity ne fonctionne pas avec tout les navigateurs sous ie c'est filter...

ou -ms-filter pour IE8...

Pour tout cela je vous conseille le site "developper" de Mozilla qui est assez complet sur les propriétés et leurs supports par les différents navigateurs (Firefox, IE, Safari et Opera) : https://developer.mozilla.org/en/CSS_Reference

Par exemple pour opacity : https://developer.mozilla.org/en/CSS/opacity

a++

propriété opacity<>z-indexe souci héritage

CSS

Discussions similaires

Partager

Partager