网页变灰色方法 - 云岚博客

网页变灰色方法

2022-06-11 / 0 评论 / 17 阅读 / 正在检测是否收录...

06/11

通过修改CSS样式可以简单快捷的实现网页变灰效果。

在需要修改的元素中添加如下 CSS 样式：

filter: grayscale();

比如我想将整个页面都改为灰色，那么只需为 <html> 标签设置该样式即可：

html {
    ...
    filter: grayscale();
}

如果我只想 <body> 变灰，那我只需在 <body> 中设置该样式：

body {
    ...
    filter: grayscale();
}

设置后就只有该标签内的内容才会变灰

还可以设置灰度，例如：
设置灰度为 50%

html {
    ...
    filter: grayscale(50%);
}

这个值是转换比例，取值范围为 0%～100%，也就是 0～1，接受浮点数，当数值为 0% 时图像无变化，为 100% 时完全转为灰度图像。

不过，因为众所周知的兼容性问题，建议还是添加多个类似的属性：

html {
    ...
    -webkit-filter: grayscale();
    -moz-filter: grayscale();
    -ms-filter: grayscale();
    -o-filter: grayscale();
    filter: grayscale();
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

其中最后一行是用于兼容『Internet Explorer』