Comment définir le contraste d'une image à l'aide de CSS : Vous pouvez utiliser l'attribut [filter:contrast(%)] pour définir le contraste d'une image, tel que [filter:contrast(0%)]. L'attribut filter définit les effets visuels de l'élément, tels que le flou, la saturation, le contraste, etc.
Introduction à l'attribut : L'attribut
filter définit l'effet visuel (par exemple : flou et saturation) de l'élément (généralement (Recommandation vidéo d'apprentissage : tutoriel vidéo CSS) Syntaxe : 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. Exemple : 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!filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
Copier après la connexion<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
img{
width: 200px;
}
.img1{
/*没有滤镜效果*/
/*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
-webkit-filter: none;
filter: none;
}
.img2{
/*调整元素的对比度*/
/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
-webkit-filter: contrast(30);
filter: contrast(30);
}
</style>
</head>
<body>
<div class="demo">
<img src="1.jpg" class="img1"/>
<img src="1.jpg" class="img2"/>
</div>
</body>
</html>Copier après la connexion
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
