css怎么让图片变暗？
css怎么让图片变暗？
kirin
发布于 2020-10-28 17:51:13
发布于 2020-10-28 17:51:13
代码可运行
运行总次数：0
代码可运行
css怎么让图片变暗？下面本篇文章就来给大家介绍一下使用CSS让图片变暗的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
在CSS中，可以利用滤镜filter属性，通过设置filter属性为brightness(%)和contrast(%)来让图片变暗。
filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。
语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() |
invert() | opacity() | saturate() | sepia() | url();提示：使用空格分隔多个滤镜。
注意：滤镜通常使用百分比 (如：75%), 当然也可以使用小数来表示 (如：0.75)。
首先，我们先建立一个demo，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3 filter滤镜</title>
<style>
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
</style>
</head>
<body>
<div class="demo">
<img src="2.jpg" />
</div>
</body>
</html>效果是这样的（没有加任何滤镜效果）：
使用filter:brightness(%)—设置图片亮度
.demo img{
-webkit-filter: brightness(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: brightness(50%);
/* 设置图片的亮度，使其看起来更亮或更暗。如果值是0%，图像会全黑；值是100%，则图像无变化；
值是100%以上，则图像更亮*/
}效果图：
使用filter:contrast(%)—设置图片对比度
.demo img{
-webkit-filter: contrast(50%); /*考虑浏览器兼容性：兼容 Chrome, Safari, Opera */
filter: contrast(50%);
/* 设置图片对比度，值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，
意味着会运用更低的对比。若没有设置值，默认是1。*/
}效果图：
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/10/19 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
