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

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

不言original: 2018-10-26 14:27:4621520parcourir

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>

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>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment styliser les barres de défilement avec CSS ? Comment définir le style de la barre de défilement à l'aide de CSSArticle suivant：Comment styliser les barres de défilement avec CSS ? Comment définir le style de la barre de défilement à l'aide de CSS

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

Articles Liés