第一种：利用滤镜filter属性
通过设置filter属性为brightness(%)和contrast(%)来让图片变暗。
filter 属性定义了元素(通常是)的可视效果(例如：模糊与饱和度)。
语法：
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() |
invert() | opacity() | saturate() | sepia() | url();
例子： - filter: brightness(50%); 设置图片的亮度，使其看起来更亮或更暗。如果值是0%，图像会全黑；值是100%，则图像无变化，值是100%以上，则图像更亮 - filter: contrast(50%); 设置图片对比度，值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。
直接上DEMO
原图
50%亮度
50%对比度
第二种：通过给背景图片设置背景色与透明度
background: linear-gradient( rgba(0,0,0,0.2), rgba(0, 0, 0, 0.5) ),url(/logo.png);
标题：CSS将图片变暗（降低亮度）的两种方法
分类：页面那些事
链接：https://www.aqwdzy.com/content/98
版权：通天技术网(www.aqwdzy.com)所分享发布内容，部分为网络转载，如有侵权请立即联系方式，我们第一时间删除并致歉！
热烈庆祝通天技术网开业大吉
@通天技术网 热烈庆祝通天技术网开业大吉
热烈庆祝通天技术网开业大吉
@通天技术网 热烈庆祝通天技术网开业大吉