Opacité Background-image

Salut,

Je veux donner un peu de transparence à un background-image, mais quand j'utilise la fonction : opacity:0.75, ça s'applique sur le background-image et aussi sur le texte et je ne veux pas appliquer l'opacité sur le texte ( balise h1 )

<div id="ustensiles">
<h1>La Réalisation<br/>Les ustensiles</h1>
</div>

#ustensiles {	
	background:url(../img/backgrounds/accueil_realisation.jpg) 0 0 no-repeat;
	opacity:0.75;
}

Quelle est ma solution ?

Merci d'avance

Hello,

Alors là le mieux reste tout de même d'avoir une image d'arrière plan en PNG avec transparence (ou semi-transparence), parce que la propriété opacity est héritée. Après il te reste la possibilité de jouer avec des positionnements absolus, etc., mais je crois que le plus simple reste l'image avec transparence intégrée.

En réalité mon problème est bien plus gros !

Je construis un site avec un systeme de page responsive. J'ai une page d'accueil avec 4 zones contenant chacune d'elle une image et un titre ( comme une sorte de patchwork ).

J'ai un background-color appliqué sur mon Body, ce qui me permet d'avoir un petit effet de couleur sur mon image légèrement transparante. Lors du survol d'une des ces zones je souhaite que mon image appelé dans mes ccs passe en opacité 1.
En amont de tout ça, j'aimerai que mon titre ne soit pas influencé par l'attribut opacité appliqué pour mon image. Voici un preview de ma page d'accueil pour mieux comprendre mes explications :

Ce que j'ai :


Ce que je voudrais :

Afin d'éviter le soucis de l'héritage de "opacity", le mieux reste d'utiliser une image.
Afin d'avoir l'effet désiré au passage de la souris, rien de plus simple, il te faut deux img ou, le mieux, un sprite contenant tes deux background et jouer sur le background-position.

#div_img {
    background-image : url(/path/to/sprite.png); /* image avec transparence */
}

#div_img :hover {
    background-position : xem yem; /* x et y correspondent au déplacement du sprite */
}

En mettant les deux img côte à côte, il te suffit de jouer sur la valeur de x, en em ou px. Si elles sont l'une en dessous de l'autre, c'est sur y qu'il faut agir.

Oui très bonne idée le sprite, merci beaucoup Hikingyo

Je vais faire ça en dernier recours, mais j'aimerai vraiment garder mon titre h1 afin de pouvoir modifier le texte et d'éviter de le pixeliser. Je crains qu'avec le système du sprite, mon image risque de ce pixeliser lors du changement de taille d'écran ( + grand ) ?!

Avec la technique que je t'ai exposé, tu conserve tes h1 sans opacité.
De plus, si tu veux avoir différents taille d'image pour différente définition, c'est tout à fais possible grâce aux média queries.

@media only screen and (max-width: xxxem) {
   #div_img
     { background-position : xem yem; } /* coordonnées de l'image correspondant à la def

    #div_img :hover 
    { /* bis répétita */ }
}

tu peux faire çà pour autant de def que tu veux. pour éviter la pixélisation, soit tu prends une grande image que tu resize plus petite, soit tu fais différentes images en fonctions de la def.
Modifié par Hikingyo (28 Nov 2013 - 17:10)

salut,
tu pourrais utiliser les contenus générés. Si la taille de l'image que tu utilises pour ton background est à la bonne taille, il te suffit de l'utiliser telle quelle:

#ustensiles {position:relative;}
#ustensiles:before {content:url(../img/backgrounds/accueil_realisation.jpg);position:absolute;top:0;left:0;opacity:.75;z-index:-1;}

Si non tu pourrais dimensionner ton contenu généré et faire correspondre l'image:

#ustensiles {position:relative;}
#ustensiles:before {content:"";position:absolute;width:100%;height:100%;top:0;left:0;background:url(../img/backgrounds/accueil_realisation.jpg) 0 0 no-repeat;background-size:cover;opacity:.75;z-index:-1;}

Au pire, tu introduit un nouvel élément enfant de "ustensiles", comme un <div> par exemple et tu lui appliques le même code que précédemment :

<div id="ustensiles">
	<div></div>
	<h1>La Réalisation <br/> Les ustensiles</h1>
</div>

#ustensiles>div {position:absolute;width:100%;height:100%;top:0;left:0;background:url(../img/backgrounds/accueil_realisation.jpg) 0 0 no-repeat;background-size:cover;opacity:.75;z-index:-1;}