Question css

Forums > Informatique > Question css

Page : 1

JustineF
#1 3615 myliFe

Dites, petite question aux pros du css.
J'ai en body une image de fond.
Pour le header, je voudrais faire un rectangle de couleur avec une opacité de 50% (pour qu'on voit à travers l'image du body) mais je vousdrais que la background-image (du header) reste opaque.
C'est possible, ça ?

Pour l'instant, j'ai ça
#header { background: #4494b5 url(images/logo_blanc.png) no-repeat left; opacity: 0.5; }
Mais forcément, l'image prend la transparence...

Merci de votre aide.

lundi
09 février 2009 à 20:25

#2 PanPan

Oui c'est possible !

lundi
09 février 2009 à 20:36

#3 CaptNCook

Hum je pige pas trop ce que tu veux faire. Mais si tu veux avoir deux opacités différentes, il te faut deux calques différents.

lundi
09 février 2009 à 20:38

JustineF
#4 3615 myliFe

CaptNCook a écrit
Hum je pige pas trop ce que tu veux faire. Mais si tu veux avoir deux opacités différentes, il te faut deux calques différents.

Genre un #header avec la couleur et transparence et un #header_img sans couleur de fond, avec mon image opaque.
Je vais tester ça.

lundi
09 février 2009 à 20:56

#5 Akshell

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
background : url('http://uppix.net/4/e/4/17f8170db2b408cb54308fed27c91.jpg') top left no-repeat;
}
#header2 {
background: url('http://lasile.fr/images/logo.gif') no-repeat left;
width : 100px;
height : 100px;
position : absolute;
}
#header {
background: #4494b5 no-repeat left;
height : 100px;
opacity : 0.5;
filter : alpha(opacity=50);
}
</style>
</head>
<body>
<div id="header2"></div>
<div id="header"></div>
</body>
</html>

Dernière modification le 09/02/09 à 21:03 par Akshell

lundi
09 février 2009 à 21:01

JustineF
#6 3615 myliFe

Yep, merci, c'est ce que j'avais en tête.
le filter:alpha(), c'est pour ie ?
(j'avais vu que le opacity tout court n'était pas reconnu par ce navigateur de m****)

mardi
10 février 2009 à 01:38

#7 SimOOn

Ouaip, c'est bien ça.

mardi
10 février 2009 à 01:42

Forums > Informatique > Question css

Page : 1

Répondre au sujet

Vous devez être identifié pour participer à ce topic.