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

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>

效果图:

1.png

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滤镜,且可以包含一个锚点来指定一个具体的滤镜元素。

更多web前端开发知识,请查阅 HTML中文网 !!

以上就是css怎么设置图片的对比度?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏