Block transparent mais pas son contenu

Résolu/Fermé
Utilisateur anonyme - 6 avril 2011 à 15:29
 Utilisateur anonyme - 6 avril 2011 à 16:09
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





5 réponses

Sicey Messages postés 57 Date d'inscription mardi 18 mai 2010 Statut Membre Dernière intervention 4 décembre 2012 1
6 avril 2011 à 15:33
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à :)
0
sculderoy Messages postés 78 Date d'inscription samedi 26 mars 2011 Statut Membre Dernière intervention 24 septembre 2018 15
6 avril 2011 à 15:34
+1. Que veux tu faire ?
0
Utilisateur anonyme
6 avril 2011 à 15:54
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
0
sculderoy Messages postés 78 Date d'inscription samedi 26 mars 2011 Statut Membre Dernière intervention 24 septembre 2018 15
6 avril 2011 à 16:00
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 ?
0

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

Posez votre question
Utilisateur anonyme
6 avril 2011 à 16:09
ok ok merci, pour l'aide. jvais voir ce que je peut faire
0