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

最新推荐文章于 2024-05-13 17:48:02 发布

html前端基础入门教程

最新推荐文章于 2024-05-13 17:48:02 发布

阅读量1.9k

点赞数 2

分类专栏： html 文章标签： javascript css vue.js html html5

本文链接：https://blog.csdn.net/htkms87/article/details/105705532

版权

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

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

html前端基础入门教程

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css怎么设置图片的对比度？

css怎么设置图片的对比度？下面本篇文章给大家介绍一下使用css设置图片对比度的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。css怎么设置图片的对比度？在CSS中，可以使用filter:contrast(%)样式来给图片设置对比度。其中filter属性用于给图片加滤镜效果，设置值为contrast(%)可以调整元素的对比度。示例：<!DO...
复制链接

扫一扫