搜索

网页变灰色方法

2022年06月11日 71 阅读 0 评论 822 字

通过修改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』

本文著作权归作者 [ 卧云揽月 ] 享有，未经作者书面授权，禁止转载，封面图片来源于 [ 互联网 ] ，本文仅供个人学习、研究和欣赏使用。如有异议，请联系博主及时处理。

html

— END —

云岚博客博客

搜索

标签

网页变灰色方法