css怎么设置图片的对比度？

最新推荐文章于 2025-01-14 15:28:58 发布

原创最新推荐文章于 2025-01-14 15:28:58 发布 · 2.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css #vue.js #html #html5

html 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在CSS中通过filter:contrast(%)属性来调整图片的对比度，详细讲解了filter属性的工作原理和不同滤镜效果，如brightness(), grayscale(), sepia(), saturate()等，并提供了使用示例。" 104992152,8442185,掌握Bash脚本：从Shell到文件系统导航,"['shell脚本', 'bash命令', 'Linux系统', '生产力工具', '文件导航']

css怎么设置图片的对比度？下面本篇文章给大家介绍一下使用css设置图片对比度的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

css怎么设置图片的对比度？

在CSS中，可以使用filter:contrast(%)样式来给图片设置对比度。其中filter属性用于给图片加滤镜效果，设置值为contrast(%)可以调整元素的对比度。

示例：

<!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 filter属性

使用CSS filter属性，可以将类似Photoshop的滤镜效果应用于图像和内容；滤镜效果包括例如模糊效果，阴影，色彩变换和操作，如饱和/去饱和色等。

filter属性定义了元素(通常是<img>)的可视效果，此属性主要用于图像内容。

filter属性的语法：

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

Filter 函数

注意：滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。

none：这是默认值，不适用任何效果。
brightness()：设置元素的亮度。如果亮度为0％则为全黑，如果亮度为100％，则与原始亮度相同。大于100％结果的值是更明亮的元素。
grayscale()：设置元素的灰度，它将元素颜色转换为黑色和白色。灰度0％表示原始元素，100％表示完全灰度元素。
sepia()：它将图像转换为棕褐色图像，其中0％表示原始图像，100％表示完全棕褐色。
contrast()：用于调整元素的对比度。0％对比度表示完整的黑色元素，100％对比度表示原始元素。
saturate()：用于设置元素的饱和度。0％饱和度表示元素完全不饱和，100％饱和表示原始图像。大于100％结果的值是超饱和元素。
blur()：它将模糊效果应用于元素。如果未指定模糊值，则默认值为0。
opacity()：它设置图像的不透明度效果。0％不透明度表示元素完全透明，如果不透明度为100％，则表示原始图像。
hue-rotate()：它将色调旋转应用于图像。该值定义将调整图像样本的色环周围的度数。默认值为0deg，表示原始图像；该值虽然没有最大值，超过360deg的值相当于又绕一圈。
invert()：它反转元素。默认值为0％，表示原始图像。100％使图像完全反转。
drop-shadow()：它对元素应用阴影效果。它接受h-shadow，v-shadow，blur，spread和color作为值。
url()：接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素。