CSS怎么让图片变暗?下面本篇文章就来给大家介绍一下使用CSS让图片变暗的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
在CSS中,可以利用滤镜filter属性,通过设置filter属性为brightness(%)和contrast(%)来让图片变暗。
filter 属性定义了元素(通常是)的可视效果(例如:模糊与饱和度)。
语法:
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() |
invert() | opacity() | saturate() | sepia() | url();
提示:使用空格分隔多个滤镜。
注意:滤镜通常使用百分比 (如:75%), 当然也可以使用小数来表示 (如:0.75)。
首先,我们先建立一个demo,代码如下:
css3 filter滤镜.demo{
width: 400px;
height: 300px;
margin: 50px auto;
}
效果是这样的(没有加任何滤镜效果):
使用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。*/
}
效果图: