前端如何使用CSS实现网页变灰功能

原创于 2022-12-05 23:04:51 发布 · 168 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍如何使用 CSS3 的 filter 属性将网页中所有的图片转换为 100% 灰度效果。通过设置 grayscale(100%)，可以让页面中的图片呈现出黑白风格，适用于多种网页设计场景。

在这里插入图片描述
使用CSS3 filter(滤镜) 属性实现修改所有图片的颜色为黑白 (100% 灰度)：

img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}

参考：
https://www.runoob.com/cssref/css3-pr-filter.html
https://www.runoob.com/try/try.php?filename=trycss3_js_filter

标签

#css #前端 #javascript