28173 sujets

CSS et mise en forme, CSS3

Transparence background-image

Salut à tous,
J'ai un petit problème sur CSS que je n'arrive pas à résoudre, quelqu'un pourra me donner un coup de main s'il vous plaît ?
En bref, je voudrais gérer le niveau de transparence d'une image .gif

Lorsque j'ajoute :
filter: alpha(opacity=50);
opacity:.50;
-moz-opacity:.50;

Afin que la transparence s'applique juste sur back.gif, le tout devient transparent Smiley fache 

.test {
BACKGROUND-COLOR: #000000;
BACKGROUND-REPEAT:repeat;
BACKGROUND-IMAGE:url('back.gif');
BORDER-RIGHT: #FFFFFF 3px solid;
BORDER-LEFT:  #FFFFFF 3px solid;
BORDER-TOP: #FFFFFF 3px solid; 
BORDER-BOTTOM: #FFFFFF 3px solid;
COLOR: #FFFFFF;
FONT-SIZE: 11px; 
FONT-STYLE: normal; 
FONT-FAMILY: Verdana; 
TEXT-DECORATION: none;       
LINK:text-decoration: none;

}


Je vous remercie d'avance pour vos réponses
Modifié par webmasster (20 Dec 2006 - 18:23)
Bonjour,

C'est normal !! Tu géres la transparence sur ta class complete, background, texte, image enfin tout ce qu'elle contient quoi!

Tu ne peux pas gérer que la transparence du bg sauf en le rendant naturellement plus transparent !!

Au fait c'est dans quel but? un rollover ?
Modifié par ghost (20 Dec 2006 - 00:37)
Bonsoir,
C'est pour avoir une sorte de motif.


<div style="background-image:url('back.gif');filter: alpha(opacity=50);">
contenu </div>


J'ai aussi essayé ça mais pas de réussite.

J'ai utilisé le .gif pour avoir la transparence mais j'ai besoin de 2 niveaux de transparence sur la même image. Une partie totalement transparente et l'autre à moitié. Comme on ne sait pas régler le niveau sur les .gif, j'ai voulu le faire à l'aide du CSS mais cette fois ce n'est pas possible juste pour le background.
Modifié par webmasster (20 Dec 2006 - 18:24)
Bonsoir webmasster et bienvenue sur Alsacréations

Comme tu es nouveau, je t'invite à lire les quelques règles de la maison.
Il est par exemple demandé de mettre correctement en forme les messages, particulièrement en utilisant les balises [code ][/code ] (sans espace) pour le code. Merci d'avance de bien vouloir éditer ton premier message pour le faire Smiley cligne
Bonjour,

Ce n'est pas de la "gestion de transparence" mais bon !
<style type="text/css">

* {
	margin: 0;
	padding: 0;
}

#image{
	width: 400px;
	height: 400px;
	background: yellow;
	margin: auto;
	margin-top: 25px;
	position: relative;
	}

#transparent 
{   
   position: absolute;
   width: 50%;
   height: 100%;
   top: 0px;
   left: 50%;
   background-color: #fff;
   opacity : 0.8;
   filter : alpha(opacity=80);
   z-index: 10;  
}
</style>

</head>
<body>

<div id="image">
</div>
<div id="transparent">
</div>		

</body>
Sujet clos
Aller à