Explication détaillée des propriétés de flou CSS : filtre et toile de fond-filtre

Explication détaillée de l'attribut de flou CSS : filtre et toile de fond-filtre

Introduction :
Lors de la conception de pages Web, nous avons souvent besoin d'effets spéciaux pour augmenter l'attrait visuel de la page. L'effet de flou est l'un des effets spéciaux courants. CSS fournit deux propriétés de flou : filter et background-filter, qui sont utilisées respectivement pour flouter le contenu de l'élément et le contenu de l'arrière-plan. Cet article explique ces deux propriétés en détail et fournit quelques exemples de code concrets.

1. Attribut de filtre

L'attribut de filtre est utilisé pour flouter le contenu des éléments. Il peut obtenir une variété d’effets différents, notamment le flou gaussien, le réglage de la luminosité, le réglage du contraste, etc. Voici quelques valeurs d'attributs de filtre couramment utilisées et leurs effets.

1. Flou gaussien (flou) : Cet attribut peut être utilisé pour ajouter un effet de flou aux éléments. Plus la valeur est élevée, plus le flou est important.

.blur {
  filter: blur(5px);
}

2. Réglage de la luminosité (luminosité) : Vous pouvez régler la luminosité de l'élément grâce à cet attribut. Les valeurs inférieures à 1 s'assombrissent, les valeurs supérieures à 1 s'éclaircissent.

.brightness {
  filter: brightness(0.5);
}

3. Réglage du contraste (contraste) : Vous pouvez régler le contraste de l'élément grâce à cet attribut. Les valeurs inférieures à 1 réduisent le contraste, les valeurs supérieures à 1 augmentent le contraste.

.contrast {
  filter: contrast(2);
}

4. Inverser l'effet de couleur (invert) : Cet attribut peut être utilisé pour ajouter un effet de couleur inversé à l'élément.

.invert {
  filter: invert(100%);
}

5. Rotation de la teinte (hue-rotate) : Cet attribut peut faire pivoter la teinte de l'élément.

.hue-rotate {
  filter: hue-rotate(90deg);
}

2. Attribut Background-filter

L'attribut background-filter est utilisé pour flouter le contenu d'arrière-plan de l'élément. Son utilisation est similaire à l'attribut filter, mais il fonctionne sur l'arrière-plan de l'élément plutôt que sur le contenu de l'élément lui-même. Vous trouverez ci-dessous quelques valeurs de propriétés de filtre de toile de fond couramment utilisées et leurs effets.

1. Flou gaussien (flou) : Cet attribut peut être utilisé pour ajouter un effet de flou à l'arrière-plan de l'élément. Plus la valeur est élevée, plus le flou est important.

.backdrop-blur {
  backdrop-filter: blur(5px);
}

2. Réglage de la luminosité (luminosité) : Vous pouvez régler la luminosité de l'arrière-plan de l'élément via cet attribut. Les valeurs inférieures à 1 s'assombrissent, les valeurs supérieures à 1 s'éclaircissent.

.backdrop-brightness {
  backdrop-filter: brightness(0.5);
}

3. Réglage du contraste (contraste) : Cet attribut peut être utilisé pour ajuster le contraste d'arrière-plan de l'élément. Les valeurs inférieures à 1 réduisent le contraste, les valeurs supérieures à 1 augmentent le contraste.

.backdrop-contrast {
  backdrop-filter: contrast(2);
}

4. Inverser l'effet de couleur (invert) : Cet attribut peut être utilisé pour ajouter un effet de couleur inversé à l'arrière-plan de l'élément.

.backdrop-invert {
  backdrop-filter: invert(100%);
}

5. Rotation de la teinte (hue-rotate) : Cet attribut peut faire pivoter la teinte d'arrière-plan de l'élément.

.backdrop-hue-rotate {
  backdrop-filter: hue-rotate(90deg);
}

Conclusion :
Les propriétés de filtre et de filtre de fond de CSS nous offrent une riche sélection d'effets de flou, rendant la conception des pages Web plus colorée. En utilisant rationnellement ces attributs, la page peut présenter un effet plus cool. Cependant, il convient de noter que différents navigateurs peuvent rencontrer des problèmes de compatibilité lors de l'utilisation de ces attributs. Des tests de compatibilité sont donc nécessaires lors de l'utilisation réelle pour garantir des effets cohérents.

Lien de référence :

• [MDN Web Docs : filtre](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)
• [MDN Web Docs : background-filter]( https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter)

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!