18041 sujets

Questions générales et questions de débutants

Opacité quand tu nous tiens

j'ai un souci avec une image qui garde la propriété transparente de l'image utilisée pour mon "background" d'un bloc, j'ai fouillé comme un dingue pendant 1 semaine sur le web mais rien à faire j'ai pas trouvé ;

pour résumer j'ai sa ->

background de body -> image normal ;
background de l'article -> image opaque ;
image (float) dans l'article -> image opaque ;


je voudrais que sa donne sa ->

background de body -> image normal ;
background de l'article -> image opaque ;
image (float) dans l'article -> image normal ;

help !!!
peut tu donner un peu de code permettant de visualiser/tester ton problème, et ainsi te proposer éventuellement une alternative a opacity, qui pour ce que tu décrit est son effet normal.
 
<article id="article2">
		<h2 id="Personnages">Personnages</h2>
		<h3 id="Perso1">Perso1</h3>
		<p>
			<a href="images/image1.jpg"><img src="images/imagemini1.jpg" alt="perso1" class="image1"></a>
			<em>Taille :</em> ?? <br /><em>Poids :</em> ??<br /><em>Date de naissance :</em> ??<br /><em>Age:</em> ??<br />
			<br />bla bla bla ...
                        <br />bla bla bla ...
		</p>
</article>



#article2, aside
{
	display: inline-block;
 	vertical-align: top;
	text-align: justify;
	background: url('images/Fond.png');
	box-shadow: 0px 3px 4px #1c1a19;
	border-radius: 5px;
	border: 1px solid red;
	padding: 19px;
}

#article2
{
	width: 588px;
	margin-right: 15px;
	font-size: 15px;
	opacity: 0.9;
}

.image1
{
	float: right;
	width: 125px;
	height: 175px;
	padding-left: 10px;
}
Bonjour,

Tu applique un opacity sur tout ton #article2, la règle s'applique à tout son contenu.
Tu peux créer une div intermédiaire:
<article id="article2">
    <div class="back_article"></div>
    <h2 id="Personnages">Personnages</h2>
    <h3 id="Perso1">Perso1</h3>
    <p>
	<a href="images/image1.jpg"><img src="images/imagemini1.jpg" alt="perso1" class="image1"> </a>
.....



#article2, aside
{
	display: inline-block;
 	vertical-align: top;
	text-align: justify;	
	box-shadow: 0px 3px 4px #1c1a19;
	border-radius: 5px;
	border: 1px solid red;
	padding: 19px;
}

#article2
{
	width: 588px;
	margin-right: 15px;
	font-size: 15px;
	
}

.back_article{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity: 0.9;
    background: url('images/Fond.png');
}

.image1
{
	float: right;
	width: 125px;
	height: 175px;
	padding-left: 10px;
}


Un truc un peu das ce genre.
La div "back_article" sera placée sur toute la surface de ton article, et vue qu'elle est en "absolute", elle ne décalera pas tes éléments en dessous.
Je ne sais pas si ça répond à ta question mais...

... la propriété opacity avec une valeur inférieure à 1 rend translucide non seulement le background d'un élément mais également son contenu. En fait, on ne devrait jamais utiliser opacity.

Pour rendre le background d'un élément translucide sans rendre pour autant son contenu translucide, il convient d'utiliser les couleurs rgba (le a est pour alpha, la valeur de transparence) ou hsla.

Exemple:

élément {
	background-color: rgba(200, 200, 200, 0.5);
}

Un article sur le sujet : http://iamvdo.me/blog/les-avantages-de-hsl-par-rapport-a-rgb

Bonne continuation.
Modifié par thierry (16 May 2015 - 15:53)
kayoo a écrit :
...Tu peux créer une div intermédiaire...

.back_article{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    opacity: 0.9;
    background: url('images/Fond.png');
}

...La div "back_article" sera placée sur toute la surface de ton article...

je me suis dit "oui mais c'est bien sur !" résulta le fond n'est pas dans l'article mais au début du site, " top: 0; left: 0; " a pris en compte le body et non l'article apparemment !
mais on n'est pas loin je pense !


thierry a écrit :
...il convient d'utiliser les couleurs rgba...

Malheureusement il ne s'agit pas là d'une couleur dans un background mais d'une image.
si tu as une autre solution.
Salut,

Et si tu mets ton "article" en position "relative"?
Si je me trompe pas, le positionnement "absolute" se réfère à la position "relative" parente.

Tiens nous au courant.

A+
kayoo a écrit :
...Et si tu mets ton "article" en position "relative"?
Si je me trompe pas, le positionnement "absolute" se réfère à la position "relative" parente...+

et bien l'image du <div> est passée au-dessus de tout le reste, si j'arrive à la mettre en dessous sa sera bon; pour le coup j'ai testé le "Z index" mais sa na pas marché ^^; peut-être que je l'utilise mal ? ou il y a une autre méthode que "z index" ?
Salut Himitsu,

Est-ce ce que tu cherches à faire ?

Kayoo t'as mis sur la bonne piste.

L'important est de créer une div parente contenant 2 éléments (ton contenu et ton background) et n'appliquer l'opacité que au background et non au parent.
Position: absolute pour le background et relative pour le parent.
Modifié par MatthieuR (17 May 2015 - 21:17)
Himitsu a écrit :
..."Z-index"... ...peut-être que je l'utilise mal ? ...

Un grand merci a "Kayoo" et a "MatthieuR"

solution : faire un <div> pour le background et mettre un "z-index" a -100 !!

une petite dernière question : pourquoi -100 sur le "z-index" ? c'est énorme ! comment sa marche ?
Salut Himitsu,

-100 pour le z-index c'est un peu beaucoup c'est vrai, mais au moins on est sûr qu'il est bien derrière tout tes éléments absolute ou relative du document et ça prévient des éventuels autres éléments avec un z-index négatif Smiley langue
Tu peux tout à fait réduire à -1 dans ton cas, dans tous les cas il faut que ça soit négatif.

Tu peux retourner sur le Codepen et changer la valeur du z-index de .carre (1, puis -10, puis -200) tu verras qu'il passe au-dessus ou en-dessous de certains éléments.
Modifié par MatthieuR (18 May 2015 - 12:14)
bonjour,

si il s'agit d'opacifier une image et de laisser transparaitre une couleur simple, une couleur rgba() peut-etre alors utilisée .
plusieurs exemple avec une couleur rgba() au dessus de l'image
- avec box-shadow: inset ... : http://codepen.io/gc-nomade/pen/wouBe
et 2 fork du pen de MatthieuR sans le .bg:
- avec un background multiple ( image + gradient) http://codepen.io/anon/pen/PqzORK
- avec background-blend-mode: ( fork ) http://codepen.io/anon/pen/xGOPjb
gc-nomade a écrit :
bonjour,

plusieurs exemple avec une couleur rgba() au dessus de l'image
- avec box-shadow: inset ... : http://codepen.io/gc-nomade/pen/wouBe
et 2 fork du pen de MatthieuR sans le .bg:
- avec un background multiple ( image + gradient) http://codepen.io/anon/pen/PqzORK
- avec background-blend-mode: ( fork ) http://codepen.io/anon/pen/xGOPjb


Je n'ai qu'un mot à dire : "Nickel" !
Je garde l'astuce du double dégradé dans un coin de ma tête, je ne connaissais pas la combinaison de background-blend-mode (peu supporté néanmoins) et du rgba dans le background et le très grand dégradé inset c'est juste nickel !

Cependant ça reste valable uniquement si on connait la couleur de l'arrière plan de ce background et que c'est une couleur unie pour donner cet effet de transparence.
Modifié par MatthieuR (18 May 2015 - 16:35)
Sujet clos
Aller à