每日一学—用一行代码实现灰色页面
📋实现灰色页面 如何让一个网页全屏变成灰色呢？这样的效果是怎么样实现的呢？难道说把页面的所有元素都一个个进行调整？这样工作量太大而且很不实际，因此接下来通过这行代码来实现效果。 filter: grayscale(100%); 这里用我的主页举例（默认情况如下）。 在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) 效果 浏览器兼容性
