Transparance du fond uniquement
Olovoo
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
Pouet -
Pouet -
Bonjour,
cela fait des heures que je cherche peut etre que je n'es pas bien chercher ^^ En tout cas je n'ai toujours pas trouver de solution qui me s'attisface. Voici mon probleme:
J'ai une image et une image de fond, (ou un texte et une image de fond), l'image de fond doit etre semi-transparante(à environs 50%) [il s'agit en faite d'un rectangle arrondi de couleur] et l'autre image ou le texte doit etre opaque à 100%!! Mais voila le probleme c'est que en CSS quand je met "opacity: 0.500" ca l'applique à mon image de fond et mon image ou mon texte J'ai déja chercher, j'ai notamment essayer "background-opacity:0.500 "
Quelqu'un aurai-t-il une balise du même genre ?? Ou une idée ?? Merci d'avance
Logiciel: Kompozer mais je me débrouille aussi avec Bloc-note
cela fait des heures que je cherche peut etre que je n'es pas bien chercher ^^ En tout cas je n'ai toujours pas trouver de solution qui me s'attisface. Voici mon probleme:
J'ai une image et une image de fond, (ou un texte et une image de fond), l'image de fond doit etre semi-transparante(à environs 50%) [il s'agit en faite d'un rectangle arrondi de couleur] et l'autre image ou le texte doit etre opaque à 100%!! Mais voila le probleme c'est que en CSS quand je met "opacity: 0.500" ca l'applique à mon image de fond et mon image ou mon texte J'ai déja chercher, j'ai notamment essayer "background-opacity:0.500 "
Quelqu'un aurai-t-il une balise du même genre ?? Ou une idée ?? Merci d'avance
Logiciel: Kompozer mais je me débrouille aussi avec Bloc-note
A voir également:
- Transparance du fond uniquement
- Comment mettre une vidéo en fond d'écran - Guide
- Fond de page word - Guide
- Trame de fond word - Guide
- Google fond noir - Guide
- Enlever le fond d'une image - Guide
11 réponses
Il y a très simple :
Rajouter un canal alpha à la couleur de fond, qui détermine la transparence
background-color : rgba(200,200,200,0.5)
Rajouter un canal alpha à la couleur de fond, qui détermine la transparence
background-color : rgba(200,200,200,0.5)
Un exemple ?
Teste ça :
Et puis, à y réfléchir, même sans
--
Teste ça :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Un titre</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
margin: 0;
padding: 0;
text-align: center;
background-color: #b0c4de;
}
#conteneur {
position: relative;
margin: 0 auto;
width: 760px;
height: 400px;
background-color: #f5f0f0;
font-family: 'Trebuchet MS', Verdana, sans-serif;
font-size : 1.2em;
font-weight : bold;
color : #000080;
}
div#transparente {
filter:alpha(opacity=70); /* IE */
-moz-opacity:0.7; /* Firefox */
opacity: 0.7; /* standard CSS3 */
-khtml-opacity: 0.7; /* Konqueror */
position: absolute;
top : 0;
left : 0;
background-color : #ffa500;
width: 382px;
height: 280px;
}
div#pastransparente {
filter:alpha(opacity=100); /* IE */
-moz-opacity:1; /* Firefox */
opacity: 1; /* standard CSS3 */
-khtml-opacity: 1; /* Konqueror */
position: absolute;
top : 227px;
left : 65px;
padding : 20px;
border : 1px solid #00ff00;
}
</style>
</head>
<body>
<div id="conteneur">
<p><br><br><br>Ce texte est en-dessous.</p>
<div id="transparente">
</div>
<div id="pastransparente">
<p>Ce texte est au-dessus.</p>
</div>
</div>
</body>
</html>
Et puis, à y réfléchir, même sans
div#pastransparente {
filter:alpha(opacity=100); /* IE */
-moz-opacity:1; /* Firefox */
opacity: 1; /* standard CSS3 */
-khtml-opacity: 1; /* Konqueror */
ça devrait marcher.
--
Content que tu sois satisfait.
Cependant, ça peut demander quelques explications.
J'ai mis une nouvelle version en ligne.
Dans l'exemple du haut, la “<div class="pastransparente">” est dans la “<div class="transparente">”.
Elle en hérite donc les spécificités et son opacité est modifiée.
L'image et le texte sont donc estompés.
J'ai rétabli la “opacity: 1;” pour montrer que cet héritage est permanent.
Dans le 2e exemple, la “<div class="pastransparente">” est hors de la “<div class="transparente">”.
Elle ne subit donc plus les spécificités de la “transparente”.
L'image et le texte sont opaques.
J'ai utilisé un positionnement en absolute pour pouvoir la placer sur la “transparente”.
--
Cependant, ça peut demander quelques explications.
J'ai mis une nouvelle version en ligne.
Dans l'exemple du haut, la “<div class="pastransparente">” est dans la “<div class="transparente">”.
Elle en hérite donc les spécificités et son opacité est modifiée.
L'image et le texte sont donc estompés.
J'ai rétabli la “opacity: 1;” pour montrer que cet héritage est permanent.
Dans le 2e exemple, la “<div class="pastransparente">” est hors de la “<div class="transparente">”.
Elle ne subit donc plus les spécificités de la “transparente”.
L'image et le texte sont opaques.
J'ai utilisé un positionnement en absolute pour pouvoir la placer sur la “transparente”.
--
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Salut ,
Je ne sais pas si j'ai bien tout compris mais pourquoi pas modifier l'opacité de ton image et la mettre en png ou gif pour conserver la transparance ?
Le bloc note c'est bien, notepad++ c'est mieu :)
by
Je ne sais pas si j'ai bien tout compris mais pourquoi pas modifier l'opacité de ton image et la mettre en png ou gif pour conserver la transparance ?
Le bloc note c'est bien, notepad++ c'est mieu :)
by
Bonjour,
Moi non plus, je ne comprends pas bien.
Un fond semi-transparent.
Pour quoi faire ? Qu'est-ce qu'il y a à voir sous le fond ? Le sous-fond ?
Quant au gif, c'est visible ou transparent, sans nuances.
Et le png n'est pas apprécié par tous les navigateurs.
Alors, essaye de voir opacity.
À quoi tu pourrais ajouter “-khtml-opacity: 0.1;” si Konqueror fait partie des navigateurs à qui tu t'adresses.
Applique ça au bon élément.
Pourvu que ça te satisfasse…
--
Moi non plus, je ne comprends pas bien.
Un fond semi-transparent.
Pour quoi faire ? Qu'est-ce qu'il y a à voir sous le fond ? Le sous-fond ?
Quant au gif, c'est visible ou transparent, sans nuances.
Et le png n'est pas apprécié par tous les navigateurs.
Alors, essaye de voir opacity.
À quoi tu pourrais ajouter “-khtml-opacity: 0.1;” si Konqueror fait partie des navigateurs à qui tu t'adresses.
Applique ça au bon élément.
Pourvu que ça te satisfasse…
--
Je n'es pas encore eu le temps de regarder toute vos réponces dans le détails mais je vous remerci beaucoup de m'avoir accorder un peu de votre temps, en faire je m'explique mieu j'ai le fond de ma page web qui est une image qui est pas endroit noir, à d'autre endroit rouge ou encore jaune. je veux en faite mettre un fond sous mon texte pour que l'on voir bien ce qu'il y est écrit mais je veux que l'on sot comme même mon image de fond d'ou la semi-transparance. voila j'espere avoir été un peu près clair, je vais me pencher sur vos solutions et merci encore
Comme l'a dit Gihef (+1)
tu gères ton image par exemple en y rajoutant:
tu gères ton image par exemple en y rajoutant:
style="filter:alpha(opacity=50);" /* ca va faire 50% visible sous IE */
Merci beaucoup pour vos réponces je viens enfin d'arriver à faire ce que je voulais, Merci surtout à Gihef pour son exemple qui repond exactement à mon problème.
La nouvelle version est super claire .. merci pour le coup de main .. on peu faire ca dans un tableau (-> avoir le fond du tableau avec une opacité 50%environ et le texte net ?) . merci
je veux refaire mon blog je veux que le fond soit noir avec une image et que l'écriture soit transparente voila le modèle de blog qui m'avait plu Accéder à ses fichiers depuis n'importe où malheureusement je ne connais pas le code de cette ecrriture transparente je n'ai aps compris comment la faire
merci de vuloir m'aider
merci de vuloir m'aider