让网站页面变成黑白色或灰色的方法有哪些？

更新时间：2022年12月06日 15:44:10 作者：飞飞科技屋

有时我们需要将网站页面变成黑白或灰色，尤其是一些需要哀悼的日子，以及一些有影响力的人物去世或纪念周年时，网站的所有页面都会变成灰色（黑色）和白色））表达我们对逝者或英雄的怀念和哀悼

有时我们需要将网站页面变成黑白或灰色，尤其是一些需要哀悼的日子，以及一些有影响力的人物去世或纪念周年时，网站的所有页面都会变成灰色（黑色）和白色））表达我们对死者或英雄的缅怀和哀悼。

当大家看到整个网站内容都变成了灰色，包括按钮、图片等，此时我们可能会想这是怎么做到的呢？

有人会认为所有内容都统一改成了CSS样式，所有图片都改成了灰色，按钮等样式也都改成了灰色。 但仔细想想，成本太高了，如果某个控件忘记添加灰色样式，那就太唐突了。

其实解决办法很简单，只需要几行代码。 通过参考资料，我总结了以下可以帮助我们实现目标的方法：

将此网页的颜色更改为灰色的最简单方法是在当前页面的 css 中。 添加以下代码并使其在任何浏览器中正确执行：

方法一：

<style type="text/css">
html {
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
 filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter:grayscale(1)
}
</style>

就是过滤器的意思。 :gray 表示给页面添加灰度滤镜，这样html中的所有内容都会变成黑白的。 不过这个过滤器对于浏览器是无效的，所以下面会有一行-:(100%); 这种风格是使用内核的浏览器所独有的。 含义与：gray;类似，但写法不同。

方法二：

下面的代码可以将网页变成黑白的。 将代码添加到CSS顶部，实现简单的装饰。 如果网站不使用CSS，可以将其插入网页/模板的HTML代码和：

<style>
 html {
 filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
 -webkit-filter: grayscale(100%);}
</style>

有些网站可能无法使用此CSS，因为该网站没有使用最新的Web标准协议。 请将网页顶部替换为以下代码：

还有一些网站无法通过CSS滤镜控制FLASH动画的颜色。 可以在FLASH代码中的 和 之间插入：

终于

给定一段标准化代码，将这段代码添加到网站页面的css中，即可实现将页面变成灰色的效果：

html{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter:grayscale(100%);
    -o-filter:grayscale(100%);
    filter:grayscale(100%);
    filter:url("data:image/svg+xml;utf8,#grayscale");
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)
}

关于当网站变灰时可以快速实施哪些方法的文章到此结束。 更多关于网站变灰的相关内容，请搜索 House之前的文章或继续浏览以下相关文章。 我希望你将来也能这样做。 请支持脚本之家！