CSS将图片变暗(降低亮度)的两种方法

首页 页面那些事 CSS将图片变暗(降低亮度)的两种方法
~~~ 热烈庆祝通天技术网开业大吉 ~~~

第一种:利用滤镜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.tongtian.icu/content/98

版权:通天技术网(www.tongtian.icu)所分享发布内容,部分为网络转载,如有侵权请立即联系方式,我们第一时间删除并致歉!

评论 (评论区只画了下样式,还没做功能,这里短时间内不会更新,有问题弹射至网站底部工单系统)

电子邮件地址不会被公开。 必填项已用 * 标注

  • 通天技术网
    回复

    热烈庆祝通天技术网开业大吉

  • 通天技术网
    回复

    热烈庆祝通天技术网开业大吉

    相关文章