105 votes

Puis-je définir une opacité uniquement pour l'image d'arrière-plan d'un div ?

Disons que j'ai

<div class="myDiv">Hi there</div>

Je veux mettre un background-image et lui donner un opacity de 0.5 - mais je veux que le texte que j'ai écrit ait une opacité totale ( 1 ).

Si j'écrivais le CSS comme ceci

.myDiv { opacity:0.5 }

tout sera en faible opacité - et je ne veux pas de ça.

Ma question est donc la suivante : comment puis-je obtenir une image de fond à faible opacité avec un texte à opacité totale ?

-1voto

Cela peut être fait en utilisant une classe div différente pour le texte Hi There...

<div class="myDiv">
    <div class="bg">
   <p> Hi there</p>
</div>
</div>

Maintenant, vous pouvez appliquer les styles à l

tag. sinon pour la classe bg. Je suis sûr que cela fonctionne bien

-1voto

user2060451 Points 184

Aucune des solutions n'a fonctionné pour moi. Si tout le reste échoue, mettez la photo dans Photoshop et appliquez un effet quelconque. 5 minutes contre tellement de temps sur ce...

-1voto

villager1 Points 72
<!DOCTYPE html>
<html>
<head></head>
<body>
<div style=" background-color: #00000088"> Hi there </div>
<!-- #00 would be r, 00 would be g, 00 would be b, 88 would be a. -->
</body>
</html>

L'inclusion de 4 séries de chiffres en ferait un rgba, et non un cmyk, mais l'un ou l'autre fonctionnerait (rgba= 00000088, cmyk= 0%, 0%, 0%, 50%).

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X