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

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

html前端基础入门教程

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

阅读量1.8k

点赞数 2

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

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

版权

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&#

最低0.47元/天解锁文章

html前端基础入门教程

关注

2
点赞
踩
1

收藏

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

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

扫一扫