Home > Article > Web Front-end > How to set the contrast of an image in css
How to set the contrast of an image in css
- 王林Original
- 2020-11-12 09:50:242481browse
How to set the contrast of an image in css: You can use the [filter:contrast(%)] attribute to set the contrast of an image, such as [filter:contrast(0%)]. The filter attribute defines the visual effect of the element, such as blur, saturation, contrast, etc.
Attribute introduction:
The filter attribute defines the visual effect (for example: blur and saturation) of the element (usually a1f02c36ba31691bcfe87b2722de723b) Spend).
(Learning video recommendation: css video tutorial)
Syntax:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
contrast(%) Adjust the contrast of the image. If the value is 0%, the image will be completely black. The value is 100% and the image is unchanged. Values can exceed 100%, meaning a lower comparison will be used. If no value is set, the default is 1.
Example:
<!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>Related recommendations: CSS tutorial
The above is the detailed content of How to set the contrast of an image in css. For more information, please follow other related articles on the PHP Chinese website!