文章目录

📋实现灰色页面

📋实现原理

📋查看效果

filter: grayscale(0) 效果

filter: grayscale(0.20) 效果

filter: grayscale(60%) 效果

filter: grayscale(1) 效果

浏览器兼容性

📋实现灰色页面

• 如何让一个网页全屏变成灰色呢？这样的效果是怎么样实现的呢？难道说把页面的所有元素都一个个进行调整？这样工作量太大而且很不实际，因此接下来通过这行代码来实现效果。
• filter: grayscale(100%);
• 这里用我的CSDN主页举例（默认情况如下）。

•  在body或html下设置filter: grayscale(100%);这个样式后，我们可以发现页面变灰色。

---

📋实现原理

• 通过CSS3 filter(滤镜) 属性来实现灰色页面。

• filter 属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)。

• 语法格式：

  filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

• 所用的值grayscale

grayscale(%)

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0；

---

📋查看效果

filter: grayscale(0) 效果

filter: grayscale(0.20) 效果

filter: grayscale(60%) 效果

filter: grayscale(1) 效果

浏览器兼容性

数据来源MDN：grayscale() - CSS（层叠样式表） | MDN (mozilla.org)

🎯点赞收藏，防止迷路🔥