方法 1：使用 filter 属性 CSS 的filter属性提供了一种简单的方法来实现这一点。 1 2 3 html { filter: grayscale(100%); } 或者，如果你想要对整个页面应用这个效果，你也可以使用： 1 2 3 body * {
方法 1：使用 filter 属性CSS 的 filter 属性提供了一种简单的方法来实现这一点。
或者，如果你想要对整个页面应用这个效果，你也可以使用：
注意：使用 !important 是为了确保该样式能覆盖其他可能影响颜色的样式。 方法 2：使用 SVG 滤镜另一种方法是使用 SVG 滤镜。这通常是更复杂的做法，但它提供了更多的控制能力。 首先，创建一个 SVG 文件（或直接在 HTML 文件中嵌入 SVG）：
然后，在 CSS 中引用这个滤镜：
或者
方法 3：使用 JavaScript 动态切换如果你想要能够动态地开启或关闭这个效果，你可以使用 JavaScript 来添加或删除一个样式类：
然后在 CSS 中定义这个样式类：
这样，你就可以通过调用 toggleGrayscale() 函数来动态地开启或关闭灰度效果。 以上就是几种实现网站变灰的方法，你可以根据自己的需求来选择最适合你的方案。 |
2021-04-14
2023-10-11
2021-04-29
2018-01-07
2022-06-10
