第一种:利用滤镜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



第二种:通过给背景图片设置背景色与透明度
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)所分享发布内容,部分为网络转载,如有侵权请立即联系方式,我们第一时间删除并致歉!
热烈庆祝通天技术网开业大吉
@通天技术网 热烈庆祝通天技术网开业大吉
热烈庆祝通天技术网开业大吉
@通天技术网 热烈庆祝通天技术网开业大吉