Maison >interface Web >tutoriel CSS >Comment obtenir un affichage à faible luminosité en CSS3
Comment obtenir un affichage à faible luminosité en CSS3
- WBOYoriginal
- 2021-12-15 17:36:033207parcourir
Vous pouvez utiliser l'attribut de filtre et la fonction luminosité() en CSS pour obtenir un affichage à faible luminosité. L'attribut de filtre est utilisé pour définir l'effet visuel des éléments de l'image. Utilisez-le avec la fonction luminosité() pour définir la lumière et l'obscurité. style de l'élément. La syntaxe "element {filter:brightness" (valeur claire et sombre)}".
L'environnement d'exploitation de ce tutoriel : système Windows 10, version CSS3&&HTML5, ordinateur Dell G3.
Comment obtenir une faible luminosité en CSS3
En CSS, si vous souhaitez obtenir une faible luminosité, vous pouvez utiliser l'attribut filtre. L'attribut
filter définit l'effet visuel (tel que le flou et la saturation) de l'élément (généralement ). La fonction
brightness() applique une multiplication linéaire à l'image, la faisant apparaître plus claire ou plus sombre. Si la valeur est 0%, l'image sera complètement noire. Si la valeur est de 100 %, il n'y aura aucun changement dans l'image. D'autres valeurs correspondent à des effets multiplicateurs linéaires. Les valeurs supérieures à 100 % sont acceptables et l'image sera plus lumineuse qu'avant. Si aucune valeur n'est définie, la valeur par défaut est 1.
L'exemple est le suivant :
<html>
<head>
<style>
.img1{
-webkit-filter: brightness(50%); /* Chrome, Safari, Opera */
filter: brightness(50%);
}
</style>
</head>
<body>
<p>左面低亮度，右面原亮度:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%" class="img1">
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
</body>
</html>Résultat de sortie : 
(Partage vidéo d'apprentissage : Tutoriel vidéo CSS)
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!