利用CSS设置图像的对比度

怡然一记 • 2022-12-10 • 技术分享 • 284 阅读

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()函数设置的是元素的对比度，对比度对视觉效果的影响非常关键，理论上来说，对比度越高，图像在轮廓上显示越清晰，对比度越低，轮廓……
<<上一篇
下一篇>>
文章目录
关闭
目 录