查看原文

? 前端如何实现网页变灰功能？

内容简介：

今天来从前端的角度看看网页置灰是如何实现的，以及相关使用技巧！
实现思路
先来看看一些主流网站是如何实现置灰的：
BiliBili：

淘宝：

京东：

掘金：

可以看到，这些网站实现置灰的方式都完全一样，但都大同小异。本质上都是使用了 CSS 中的 filter 属性。下面是 MDN 对 filter 属性的解释：

CSS 属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

简单来说，filter 属性就是用来给元素添加不同的滤镜。该属性中支持传入多种 Filter 函数，其中 grayscale() 函数就是用于置灰的关键。grayscale() 函数将改变输入图像灰度，该函数有一个参数，表示转换为灰度的比例...

?更多精彩头条内容，请收藏程序员导航网，为您提供一站式码农必备网址大全，持续为您输出优质站点和IT信息！