Block transparent mais pas son contenu
Résolu
Utilisateur anonyme
-
Utilisateur anonyme -
Utilisateur anonyme -
Bonjour, j'ai un petit souci, j'ai créer un block j'ai fait en sorte qu'il soit transparent grâce au CSS avec opacity, jusque la tout va bien ,le souci c'est que lorsque j'y ajoute une photo dans ce block ou même un lien , ça devient également transparent et ça c'est embêtant car on ne voit presque pas l'image.Pour mon lien qui est un titre c'est pareille c'est transparent.
j'ai du donc faire une bêtise en écrivant mal mon html ou CSS.
Avez vous une idée de comment faire en sorte a ce que le contenu apparaissent normal tout en gardant mon block transparent?
cordialement
j'ai du donc faire une bêtise en écrivant mal mon html ou CSS.
Avez vous une idée de comment faire en sorte a ce que le contenu apparaissent normal tout en gardant mon block transparent?
cordialement
A voir également:
- Block transparent mais pas son contenu
- Block breaker - Accueil - Services en ligne
- Code block - Télécharger - Langages
- Un site est en train de lire un contenu - Forum Xiaomi
- Ce contenu n'est pas disponible facebook - Forum Facebook
- Word a trouvé du contenu illisible - Guide
5 réponses
Si tu mets le conteneur de ton image en transparent, alors lui, ET tout son contenu sera transparent !
Que veux-tu vraiment faire ?
Si tu ne veux pas de fond ou un fond seulement moins visible, utilise background : transparent.... blabla
Voilà :)
Que veux-tu vraiment faire ?
Si tu ne veux pas de fond ou un fond seulement moins visible, utilise background : transparent.... blabla
Voilà :)
non non non, je veut que mon block soit voyant,car les images doivent être quand même entourer dan un cadre mais pas invisible.
j'ajoute mon code html:
<div id="block_right">
<div class="block_images">
<div class="images"><h2><a href="images.html">Images</a></h2></div>
</div>
</div>
et mon CSS:
#block_right
{
border-radius: 10px;
width: 40%;
height: 804px;
float: right;
margin-right: 140px;
margin-top: 15px;
background: black;
color: white;
opacity: 0.5;
}
voila, ça c'est mon block qui forme un cadre mais on y voit l'image de fond du site , mais en ajoutant une image , l'image devient aussi opaque,et ça je ne veut pas, je eut qu'elle apparaisse normalement. je dois surement écrire mon code autrement
bon j'espère que je me suis bien expliquer ,suis pas bon pour ça
j'ajoute mon code html:
<div id="block_right">
<div class="block_images">
<div class="images"><h2><a href="images.html">Images</a></h2></div>
</div>
</div>
et mon CSS:
#block_right
{
border-radius: 10px;
width: 40%;
height: 804px;
float: right;
margin-right: 140px;
margin-top: 15px;
background: black;
color: white;
opacity: 0.5;
}
voila, ça c'est mon block qui forme un cadre mais on y voit l'image de fond du site , mais en ajoutant une image , l'image devient aussi opaque,et ça je ne veut pas, je eut qu'elle apparaisse normalement. je dois surement écrire mon code autrement
bon j'espère que je me suis bien expliquer ,suis pas bon pour ça
Ce n'est donc pas réellement possible. Deux solutions.
1- Tu mets un png noir avec l'opacité souhaitée sous photoshop
2- Tu créé un block parent en position relative puis deux blocs enfant en position absolute. Dans l'un d'eux tu mets ton fond avec l'opacité diminuée et dans l'autre ton contenu...
Cette dernière méthode est absolument crade au niveau du code et de la sémantique, mais la première solution en fonctionnera pas sous IE6 (png transparent non supporté nativement)... Mais qui se soucis encore d'IE6 ?
1- Tu mets un png noir avec l'opacité souhaitée sous photoshop
2- Tu créé un block parent en position relative puis deux blocs enfant en position absolute. Dans l'un d'eux tu mets ton fond avec l'opacité diminuée et dans l'autre ton contenu...
Cette dernière méthode est absolument crade au niveau du code et de la sémantique, mais la première solution en fonctionnera pas sous IE6 (png transparent non supporté nativement)... Mais qui se soucis encore d'IE6 ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question