使用css样式盘点最近App首页、网站首页变灰色的几种方式

摘要

1. filter

为了应对需要全站置灰的情况，前端开发者可以使用CSS的filter属性，通过向HTML标签添加灰度滤镜实现。示例代码为：html { filter: grayscale(.95); -webkit-filter: grayscale(.95); }。更多细节可参考在线文档。

2. svg

另一种方法是使用SVG滤镜，同样需要添加对应的样式以实现全站置灰的效果。

3. backdrop-filter

对于仅需置灰首屏的需求，可以使用backdrop-filter属性。这通过在页面上覆盖一层滤镜蒙版，只对首屏置灰，同时确保页面其他交互不受影响，需添加pointer-events: none。

4. 混合模式

对于需要更高兼容性的情况，可以通过CSS的混合模式属性如mix-blend-mode进行颜色操作，支持多种模式（色相、饱和度、颜色）。

总结：

全站置灰可以通过filter: grayscale()实现。SVG滤镜适用于低版本浏览器。首屏置灰推荐使用backdrop-filter: grayscale()和pointer-events: none。混合模式（mix-blend-mode）提供更好的兼容性。在处理颜色相关的CSS时，应考虑使用filter、backdrop-filter和mix-blend-mode。

5. 样式源码提取

相关的样式源码可以通过百度网盘链接获取，提取码为：xion。

想要了解更多内容？

查看原文：使用css样式盘点最近App首页、网站首页变灰色的几种方式

文章来源：

熊泽有话说

扫码关注公众号

如何选择合适的自动化测试工具

了解更多