Comment puis-je rendre une image d'arrière-plan partiellement opaque tout en gardant le texte entièrement opaque en HTML ?

Obtenir une opacité partielle pour les images d'arrière-plan avec du texte transparent

En HTML, il est possible de définir une valeur d'opacité pour les éléments à l'aide de l'option "opacité " propriété. Cependant, lors de l'application de l'opacité à un div avec une image d'arrière-plan, le texte à l'intérieur du div devient également moins opaque.

Pour résoudre ce problème, une solution consiste à utiliser une image d'arrière-plan à « dégradé linéaire ». Voici comment y parvenir :

<div><p>.myDiv {<br> background-image: Linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5 )), url("your_image.png");<br>}<br>

En utilisant une image d'arrière-plan à dégradé linéaire avec une couleur transparente (rgba(255,255,255,0.5)), nous pouvons créez un arrière-plan translucide tout en conservant une opacité totale pour le texte. Le format de couleur "rgba" spécifie les valeurs rouge, vert, bleu et alpha (transparence), la valeur alpha étant définie sur 0,5 pour une transparence de 50 %.

La propriété "url" spécifie ensuite le chemin d'accès à votre image d’arrière-plan. En combinant le dégradé linéaire et l'image d'arrière-plan, nous créons un arrière-plan partiellement transparent avec un texte entièrement opaque.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!