利用CSS设置图像的对比度

contrast()函数

contrast()函数设置的是元素的对比度,对比度对视觉效果的影响非常关键,理论上来说,对比度越高,图像在轮廓上显示越清晰,对比度越低,轮廓越模糊。其参数设置也是100%为原图对比度,高于则高,低于则低

代码示例:

<style type="text/css" media="all">
    .dark {
        filter: contrast(50%);
    }
    .bright {
        filter: contrast(150%);
    }
</style>
<body>
    <img src="https://yunshew.com/images/2022/12/03/IXdf.jpg" alt="1" />
    <img src="https://yunshew.com/images/2022/12/03/IXdf.jpg" alt="2" class="dark"/>
    <img src="https://yunshew.com/images/2022/12/03/IXdf.jpg" alt="" class="bright"/>
</body>

 

效果演示

原图效果

1

对比度50%

2

对比度150%

1

你也来试试吧!

提示:

每次预览后,需要再次点击编辑代码才会回到代码界面进行修改或者复制

怡然一记
利用CSS设置图像的对比度
https://xsunhua.cn/701.html
THE END
分享
二维码
打赏
海报
利用CSS设置图像的对比度
contrast()函数 contrast()函数设置的是元素的对比度,对比度对视觉效果的影响非常关键,理论上来说,对比度越高,图像在轮廓上显示越清晰,对比度越低,轮廓……
<<上一篇
下一篇>>
文章目录
关闭
目 录