Maison >interface Web >tutoriel CSS >Comment définir les niveaux de gris de l'image d'arrière-plan en CSS
Comment définir les niveaux de gris de l'image d'arrière-plan en CSS
- 王林original
- 2021-03-04 14:31:215896parcourir
Comment définir les niveaux de gris de l'image d'arrière-plan en CSS : Vous pouvez utiliser le filtre d'attribut de filtre pour le définir, tel que [filter:grayscale(100%)], ce qui signifie que l'image est complètement convertie en une image en niveaux de gris.
L'environnement d'exploitation de cet article : système Windows 10, CSS 3, ordinateur thinkpad t480.
Il existe un filtre d'attribut de filtre en CSS, qui définit l'effet visuel de l'élément (généralement img), tel que le flou, la saturation, les niveaux de gris, etc.
Syntaxe de l'attribut :
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Valeurs d'attribut communes :
aucune Valeur par défaut, aucun effet.
blur(px) Définit le flou gaussien sur l'image. La valeur "rayon" définit l'écart type de la fonction gaussienne, ou le nombre de pixels fusionnés sur l'écran, donc plus la valeur est grande, plus elle est floue s'il n'y a pas de valeur définie, la valeur par défaut est 0 pour ce paramètre ; peut définir la valeur de longueur CSS, mais les valeurs de pourcentage ne sont pas acceptées.
luminosité(%) applique une multiplication linéaire à l'image pour la faire 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.
contraste(%) Ajustez le contraste de l'image. Si la valeur est 0%, l'image sera complètement noire. La valeur est de 100 % et l'image reste inchangée. Les valeurs peuvent dépasser 100 %, ce qui signifie qu'une comparaison inférieure sera utilisée. Si aucune valeur n'est définie, la valeur par défaut est 1.
niveaux de gris (%)
Convertir l'image en niveaux de gris. La valeur définit l'échelle de la conversion. Si la valeur est de 100 %, l'image sera entièrement convertie en niveaux de gris, et si la valeur est de 0 %, l'image restera inchangée. Les valeurs comprises entre 0 % et 100 % sont des multiplicateurs linéaires de l'effet. Si elle n'est pas définie, la valeur par défaut est 0 ;
Exemple 1 :
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
filter: grayscale(100%);
}
</style>
</head>
<body>
<p>图片转为黑白色:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意:</strong> Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。</p>
</body>
</html>Résultats en cours :
Exemple 2 :
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: blur(5px); /* Chrome, Safari, Opera */
filter: blur(5px);
}
</style>
</head>
<body>
<p>图片使用高斯模糊效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
</body>
</html>Résultats d'exécution :
(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)
Exemple 3 :
<!DOCTYPE html>
<html>
<head>
<style>
img {
-webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */
filter: drop-shadow(8px 8px 10px red);
}
</style>
</head>
<body>
<p>给图像设置一个阴影效果:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300" style="max-width:90%">
<p><strong>注意：</strong> Internet Explorer 不支持 filter 属性。</p>
</body>
</html>Résultats d'exécution :
Recommandations associées : Tutoriel 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!