Rumah > hujung hadapan web > tutorial css > css怎么设置图片的对比度

css怎么设置图片的对比度

王林
Lepaskan: 2020-11-12 09:50:24
asal
2515 orang telah melayarinya

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

css怎么设置图片的对比度

属性介绍:

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

(学习视频推荐:css视频教程

语法:

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

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>
Salin selepas log masuk

相关推荐:CSS教程

Atas ialah kandungan terperinci css怎么设置图片的对比度. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan