Comment rendre une image d'arrière-plan transparente en utilisant CSS

L'attribut nécessaire pour rendre l'image de fond transparente en CSS est l'attribut opacity, mais lorsqu'il y a du texte, il faut séparer les éléments afin d'éviter que le texte ne soit transparent.

La propriété CSS qui rend l'image d'arrière-plan transparente est la propriété opacité, mais si vous l'utilisez pour créer du contenu avec du texte, vous constaterez que le texte Le contenu sera également transparent.

Maintenant, écrivons un CSS qui rend simplement l'image d'arrière-plan transparente.

Tout d'abord, jetons un coup d'œil au code HTML

<div class="content">
    <div class="bg"></div>
    <p>蒲公英</p>
</div>

.bg est un div vide, et "Pissenlit" est écrit à l'extérieur.

En d'autres termes, l'attribut position sera utilisé pour placer le "pissenlit" au-dessus de l'image. Regardons l'exemple de code spécifique

D'abord, donnons la position relative (position : relatif ;) à .content.

Afin de faciliter la compréhension de la transparence du fond, nous donnons d'abord un fond noir

.content{
    width: 450px;
    height: 300px;
    background: #000;
    position: relative; /*相对位置*/
}
p{
    color: #fff;
    font-weight: bold;
    text-align: center;
}

L'effet est le suivant :

Ensuite, définissons le .bg

Réglez la largeur et la hauteur à 100 % et définissez la position sur la position absolue en haut à gauche (gauche : 0 ; haut : 0 ;).

.bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url(img/pugongying.jpg);
    background-size: cover;
    opacity: 0.5;
}

L'effet est le suivant :

En fait, les personnages sont sous l'image transparente.

Donc, par rapport à l'image de fond fixée en position absolue, le contenu de p doit être devant.

Par conséquent, p peut également recevoir un ordre d'empilement en donnant position : absolue ;. (Puisqu'il est décrit comme position : absolue ;, vous pouvez également utiliser z-index pour manipuler l'ordre d'empilement.)

Enfin, nous déplaçons le texte vers le milieu

p{
    width: 100%;
    height: 1.5em;
    color: #fff;
    font-weight: bold;
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
}

Effet comme suit :

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!