Comment flouter l'image d'arrière-plan avec CSS ? Introduction à la méthode de floutage des images d'arrière-plan en CSS-tutoriel CSS-php.cn

Comment flouter l'image d'arrière-plan avec CSS ? Introduction à la méthode de floutage des images d'arrière-plan en CSS

不言

Libérer： 2018-10-26 14:27:46

original

21453 Les gens l'ont consulté

En voyant l'image d'arrière-plan floue, je pense que de nombreux amis penseront à utiliser PS pour obtenir cet effet. Alors, l'effet de flou de l'image d'arrière-plan peut-il être obtenu en utilisant CSS ? L'article suivant vous présentera comment définir le flou de l'image d'arrière-plan en CSS.

L'attribut filter est utilisé lors du flou de l'arrière-plan. Nous utilisons le flou dans l'attribut filter pour définir l'arrière-plan flou.

Le code est le suivant :

<!DOCTYPE html>
<html>
<head>
<style>
img {
    filter: blur(5px);
}
</style>
</head>
<body>
<img src="image/girl.jpg" alt="girl" width="300"    style="max-width:90%">
</body>
</html>

Copier après la connexion

L'effet de l'arrière-plan flou CSS est le suivant :

Comment flouter limage darrière-plan avec CSS ? Introduction à la méthode de floutage des images darrière-plan en CSS

La méthode ci-dessus Utilisez simplement du CSS pour flouter l'image d'arrière-plan. Jetons un coup d'œil à une méthode légèrement plus compliquée. Bien sûr, nous utilisons également l'attribut filter

. >

<!DOCTYPE html>
<html>
<head>
<style>
  .mbl {
    width: 20em;
    height: 20em;
    background: url(image/girl.jpg);
    background-size: cover;
    overflow: hidden;
    margin: 30px;
}
.text {
    width: 18em;
    height: 18em;
    margin: 1em;
    background: hsla(0, 0%, 100%, .4);
    color: black;
    text-align: center;
    overflow: hidden;
    position: relative;
}
.text::before {
    position: absolute;
    background: url(image/girl.jpg);
    background-size: cover;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: &#39;&#39;;
    filter: blur(4px);
    /*    background: rgba(225, 0, 0, 0.5);*/
}
.text p {
   height: inherit;
    width: inherit;
    display: table-cell;
    vertical-align: middle;
    position: relative;
}
</style>
</head>
<body>
<div class="mbl">
        <div class="text">
          <p>图片上面的文字内容</p>
        </div>
    </div>
</body>
</html>

Copier après la connexion

Effet de flou de l'image d'arrière-plan Comme suit :

Comment flouter limage darrière-plan avec CSS ? Introduction à la méthode de floutage des images darrière-plan en CSS

Explication : Le code ci-dessus sert principalement à définir la couleur d'arrière-plan ou l'image via des pseudo-éléments où l'arrière-plan flou doit être défini et utilisez le positionnement relatif régional et le positionnement absolu du pseudo-élément pour y parvenir. Faites en sorte que la taille du pseudo-élément soit exactement égale à la taille de la zone d'origine, puis utilisez le filtre de flou pour le rendre flou, et vous aurez. le même effet que ci-dessus.

Cet article se termine ici. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !

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!