Comment obtenir des bords définis avec le filtre de flou CSS3 ?-tutoriel CSS-php.cn

Comment obtenir des bords définis avec le filtre de flou CSS3 ?

Barbara Streisand

Libérer： 2024-11-16 16:46:03

original

381 Les gens l'ont consulté

How to Achieve Defined Edges with CSS3 Blur Filter?

Obtenir des bords définis avec le filtre flou CSS3

L'intégration de filtres CSS3 pour flouter les images améliore les effets visuels. Cependant, le filtre de flou par défaut s'étend au-delà des limites de l'image, ce qui entraîne des bords flous. Pour conserver les bords définis tout en rendant l'image floue, explorez la solution suivante :

Solution :

Enfermer l'image floue dans un

élément avec débordement : caché ; L'attribut empêche le filtre de déborder sur l'élément parent. De plus, en ajustant le paramètre les marges, comme le montre le code de démonstration ci-dessous, maintiennent les bords nets.

Démo :

[Image de la sortie souhaitée avec des bords définis et un arrière-plan flou]

CSS :

img {
    filter: blur(5px);
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    margin: -5px -10px -10px -5px;
}

div {
    overflow: hidden;
}

Copier après la connexion

HTML :

<div><img src="http://placekitten.com/300" /></div>

Copier après la connexion

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!