CSS background / transparence

Résolu/Fermé
dallap - 5 nov. 2009 à 23:11
 atango - 24 nov. 2015 à 13:54
Bonjour,
j'ai cherché pas mal de temps sur le net mais je n'ai rien trouvé qui marchait...

Je souhaiterai rendre un background transparent mais pas le texte qui se trouve dedans.
Mon background et le texte sont définis dans la même classe CSS comme ceci:

.texte_general {
	font-family: "Comic Sans MS", cursive;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #000;
	border: 5px ridge #CCC;
	text-align: left;
background-color: #FFF;
}


j'ai essayé de mettre
opacity:0.5;

mais le texte devient également transparent...

j'ai également essayé de remettre une 2 ème fois .texte_general dans mon fichier CSS en ne remettant que le background et l'opacité dedans mais c'est pareil...

auriez vous une astuce?

merci ;)
A voir également:

10 réponses

bonjour,
tu dois créer deux div superposés (dans la même position avec css),
dans le premier tu met ton background et tu le rend transparent,
dans le deuxième tu met ton texte.
voici un exemple:
html:
<div class="trans">
<img src="../img/gris.jpg" />
</div>
<div class="info" >
<h2><a href="#" >Envoyez des cadeaux a vos amis</a></h2>
</div>
CSS:
.trans{
position:absolute;
top:230px;
left:0;
height:70px;
width: 450px;
filter:alpha(opacity=55);
-moz-opacity:0.55;
opacity: 0.55;
.info{
position:absolute;
top:230px;
left:0;
height:70px;
width: 451px;
font-size:18px; font-family:Georgia, serif ; font-color:#fff;
color:#fff; padding:5px; margin:0;
overflow:hidden;
5
the Lebanese
Messages postés
259
Date d'inscription
mercredi 12 mars 2008
Statut
Membre
Dernière intervention
10 juillet 2014
16
6 nov. 2009 à 00:00
à ce moment tu fais ton png en très petit:
tu fais :
background-image : url("image.png");
background-repeat : repeat-x repeat-y;
4
Merci ! ça marche parfaitement
0
As tu essayé en utilisant css avec background transparent :
.texte_general {
background:transparent;
}
3
en effet avec une image transparente de 1px par 1px ca marche :)
merci
1
Pouvez vous bien saisir svp?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Smoking bird
Messages postés
870
Date d'inscription
mardi 11 mars 2008
Statut
Membre
Dernière intervention
10 juillet 2011
58
5 nov. 2009 à 23:13
mettre le background en png?
0
the Lebanese
Messages postés
259
Date d'inscription
mercredi 12 mars 2008
Statut
Membre
Dernière intervention
10 juillet 2014
16
5 nov. 2009 à 23:14
background-color : transparent;
ça devrait marcher
0
Pour l'idée du PNG c'est difficile à réaliser car mes blocs on des tailles différents alors l'image PNG à créer ne peut pas avoir une taille constante...

Je me suis mal exprimé désolé, je ne le veut pas totalement transparent mais juste un peu (comme la fonction opacity: 0.5; par exemple ...) donc Background-color : transparent; ne convient pas :(
0
Smoking bird
Messages postés
870
Date d'inscription
mardi 11 mars 2008
Statut
Membre
Dernière intervention
10 juillet 2011
58
6 nov. 2009 à 14:30
the lebanese, le background-repeat que tu indiques n'existe pas, par défaut une image en bck se répète automatiquement en x et y.
tout comme la valeur de bck-color est par défaut transparent.

L'opacité pour le moment c'est:
-le png
--moz-opacity
--webkit-opacity
-opacity

à confirmer, mais il me semble bien qu'il faut les trois pour le css^^
0
avion-f16
Messages postés
18739
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 mai 2022
4 390
6 nov. 2009 à 14:45
Je n'ai pas essayé mais on ne sait jamais :
.texte_general {
	font-family: "Comic Sans MS", cursive;
	font-size: 13px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #000;
	border: 5px ridge #CCC;
	text-align: left;
	background-color: #FFF;
	moz-opacity:0.5;
	webkit-opacity;0.5;
	opacity:0.5;
}
.texte_general * {
	moz-opacity:1.0
	webkit-opacity;1.0;
	opacity:1.0;
}
0
avion-f16
Messages postés
18739
Date d'inscription
dimanche 17 février 2008
Statut
Contributeur
Dernière intervention
21 mai 2022
4 390
6 nov. 2009 à 18:53
Topic résolu d'abord
0