A voir également:
- Css background image opacity
- Background image opacity - Meilleures réponses
- Background image opacity css - Meilleures réponses
- Mettre une opacity sur un background-image ✓ - Forum - CSS
- CSS background / transparence ✓ - Forum - CSS
- Background semi-transparent ✓ - Forum - CSS
- Background transparent ? ✓ - Forum - Webmaster
- Problème CSS background-image ✓ - Forum - CSS
10 réponses
mahdi_kan
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;
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;
the Lebanese
- Messages postés
- 259
- Date d'inscription
- mercredi 12 mars 2008
- Statut
- Membre
- Dernière intervention
- 10 juillet 2014
ladou45
As tu essayé en utilisant css avec background transparent :
.texte_general {
background:transparent;
}
Smoking bird
- Messages postés
- 870
- Date d'inscription
- mardi 11 mars 2008
- Statut
- Membre
- Dernière intervention
- 10 juillet 2011
mettre le background en png?
the Lebanese
- Messages postés
- 259
- Date d'inscription
- mercredi 12 mars 2008
- Statut
- Membre
- Dernière intervention
- 10 juillet 2014
background-color : transparent;
ça devrait marcher
ça devrait marcher
dallap
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 :(
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 :(
Smoking bird
- Messages postés
- 870
- Date d'inscription
- mardi 11 mars 2008
- Statut
- Membre
- Dernière intervention
- 10 juillet 2011
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^^
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^^
avion-f16
- Messages postés
- 18555
- Date d'inscription
- dimanche 17 février 2008
- Statut
- Contributeur
- Dernière intervention
- 24 avril 2021
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;
}
