HTML让一张图片变暗,css怎么让图片变暗
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，代码如下：
css3filter滤镜.demo{
width:400px;
height:300px;
margin:50pxauto;
}
效果是这样的(没有加任何滤镜效果)：
使用filter:brightness(%)---设置图片亮度
.demoimg{
-webkit-filter:brightness(50%);/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
filter:brightness(50%);
/*设置图片的亮度，使其看起来更亮或更暗。如果值是0%，图像会全黑；值是100%，则图像无变化；
值是100%以上，则图像更亮*/
}
效果图：
使用filter:contrast(%)---设置图片对比度
.demoimg{
-webkit-filter:contrast(50%);/*考虑浏览器兼容性：兼容Chrome,Safari,Opera*/
filter:contrast(50%);
/*设置图片对比度，值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，
意味着会运用更低的对比。若没有设置值，默认是1。*/
}
效果图：