Posez votre question Signaler

CSS background / transparence [Résolu]

dallap - Dernière réponse le 23 mai 2014 à 11:04
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 ;)
Lire la suite 
Réponse
+5
moins plus
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;
Ajouter un commentaire
Réponse
+2
moins plus
à ce moment tu fais ton png en très petit:
tu fais :
background-image : url("image.png");
background-repeat : repeat-x repeat-y;
Chris.13- 23 mai 2014 à 11:04
Merci ! ça marche parfaitement
Répondre
Ajouter un commentaire
Réponse
+2
moins plus
As tu essayé en utilisant css avec background transparent :
.texte_general {
background:transparent;
}
Ajouter un commentaire
Réponse
+0
moins plus
mettre le background en png?
Ajouter un commentaire
Réponse
+0
moins plus
background-color : transparent;
ça devrait marcher
Ajouter un commentaire
Réponse
+0
moins plus
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 :(
Ajouter un commentaire
Réponse
+0
moins plus
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^^
Ajouter un commentaire
Réponse
+0
moins plus
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;
}
Ajouter un commentaire
Réponse
+0
moins plus
en effet avec une image transparente de 1px par 1px ca marche :)
merci
Ajouter un commentaire
Réponse
+0
moins plus
Topic résolu d'abord
Ajouter un commentaire
Ce document intitulé «  CSS background / transparence  » issu de CommentCaMarche (www.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes.

Le fait d'être membre vous permet d'avoir des options supplémentaires.