一行代码实现页面全屏黑白

标签：浏览器 黑白 100% grayscale filter 全屏 图像 CSS 页面

 

1. 业内怎么实现
2. css属性
   1. 兼容性
   2. 如何兼容IE
3. 广发行内是怎么实现的
4. 提供一段能兼容几乎所有浏览器的代码，以新对公CRM为例

 

1、实现页面全屏黑白的示例

• 百度

 

 

• 今日头条

 

 

•  阿里

 

 

•  腾讯

 

 

 

 

 

 从上面的实现方式可以看到，关键技术是利用了 CSS 的 filter 技术，也就是 CSS 的滤镜功能。

 

2、CSS中的filter

我们看看 MDN 关于 filter 的描述：

The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders. Included in the CSS standard are several functions that achieve predefined effects. You can also reference an SVG filter with a URL to an SVG filter element.

大意是可以使用 filter 给 HTML 元素添加一些效果，比如模糊、颜色偏移，通常可用于调整图像，背景和边框的渲染效果。CSS 标准里包含了一些预定义效果的函数，你也可以通过一个URL 使用 SVG 滤镜元素(SVG filter element)。

 

2.1、grayscale() 函数（修改图像灰度）

实现页面黑白主要用到 filter 中的 grayscale 预定义函数。grayscale 函数是 CSS 预定义的函数，主要作用是将图像转换为灰度图像，通过具体的值定义转换的比例。若值为 100% 则完全转为灰度图像，值为 0% 图像无变化。

 

2.2、其他预定义函数

 

 

2.2.1、blur()（设置模糊度）

 

 

2.2.2、contrast()（设置颜色对比度）

contrast() 函数可调整输入图像的对比度。值是 0% 的话，图像会全黑。值是 100%，图像不变。值可以超过 100%，意味着会运用更低的对比。若没有设置值，默认是 1。

 

 

2.2.3、hue-rotate()（设置色相旋转）

设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。

 

 

2.2.4、drop-shadow()（设置阴影效果）

 

 

2.3、属性的浏览器兼容性

 

html {
   filter: grayscale(100%);//IE浏览器
  -webkit-filter: grayscale(100%);//谷歌浏览器
  -moz-filter: grayscale(100%);//火狐
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);//谷歌浏览器
}

 

 

2.3.1、如何兼容IE

从上图可以看到，filter 属性实际上是不支持 IE 浏览器的，

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1): 这个是个给 IE 浏览器添加滤镜的，IE 浏览器对 filter 支持的不是很好。

 

可参考：

1. MDN官网：https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter、
2. https://juejin.cn/post/6844904114405507079

 

标签：浏览器,黑白,100%,grayscale,filter,全屏,图像,CSS,页面
From： https://www.cnblogs.com/wenxuehai/p/16951292.html