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:242470browse

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.

How to set the contrast of an image in css

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn