Comment utiliser CSS pour obtenir un effet d'arrière-plan flou sur les éléments

La méthode d'utilisation de CSS pour obtenir l'effet d'arrière-plan flou des éléments nécessite des exemples de code spécifiques

Avec le développement continu de la conception Web, comment faire en sorte que les éléments de page présentent des effets élégants et uniques est devenu l'un des objectifs des concepteurs. L’un des effets courants consiste à rendre l’arrière-plan flou. En brouillant l’arrière-plan des éléments, la superposition et l’esthétique de l’interface peuvent être améliorées. Dans cet article, nous présenterons comment utiliser CSS pour obtenir l'effet d'arrière-plan flou des éléments et fournirons des exemples de code spécifiques.

Pour obtenir l'effet d'arrière-plan flou d'un élément, nous devons utiliser l'attribut filter en CSS. Cette propriété peut modifier l'apparence de l'élément grâce à une série d'effets de filtre. Parmi eux, la fonction flou() peut obtenir l'effet de flou. Ce qui suit est un exemple de code qui utilise l'attribut filter et la fonction flou() pour flouter l'arrière-plan d'un élément :

<style>
.blur-bg {
  background-image: url("背景图片地址");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(5px);
  -webkit-filter: blur(5px); /* 兼容Webkit浏览器 */
}
</style>

<div class="blur-bg">
  <!-- 页面内容 -->
</div>

Dans le code ci-dessus, on nous donne un style CSS avec un nom de classe flou-bg. Dans ce style, nous définissons l'image d'arrière-plan de l'élément (via l'attribut background-image), centrons l'image d'arrière-plan (via l'attribut background-position) et adaptons l'image d'arrière-plan à la taille de l'élément (via l'attribut background-position). attribut size dont la valeur est cover ). De plus, nous avons ajouté l'attribut filter et défini sa valeur sur flou (5px). Cela rendra l'image d'arrière-plan floue.

Il convient de noter que afin de garantir que l'effet de flou puisse être affiché normalement dans différents navigateurs, nous utilisons également l'attribut -webkit-filter et définissons sa valeur sur flou (5px). Ceci est compatible avec les navigateurs basés sur Webkit tels que Chrome et Safari.

Le code ci-dessus n'est qu'un moyen d'obtenir l'effet d'arrière-plan flou des éléments. Vous pouvez l'ajuster et le modifier en fonction des besoins de conception spécifiques. Par exemple, vous pouvez ajuster le degré de l'effet de flou pour le rendre plus doux ou plus prononcé en modifiant les paramètres de la fonction flou().

Résumé :

Dans cet article, nous avons présenté comment utiliser la propriété de filtre CSS et la fonction flou() pour obtenir l'effet d'arrière-plan flou des éléments. Avec un simple code CSS, nous pouvons facilement ajouter des effets visuels uniques et magnifiques aux éléments. J'espère que ces exemples de codes pourront vous aider à appliquer un effet d'arrière-plan flou dans la conception Web et à ajouter du charme à vos pages.

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!