css怎么设置图片的对比度

互联网 20-11-12

css设置图片的对比度的方法：可以利用【filter:contrast(%)】属性来设置图片的对比度，如【filter:contrast(0%)】。filter属性定义了元素的可视效果，如模糊、饱和度、对比度等。

属性介绍：

filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

（学习视频推荐：css视频教程）

语法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

contrast(%) 调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

举例：

<!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>

css怎么设置图片的对比度

相关资讯

标签推荐