网站首页> 前端开发> JavaScript> 前端如何实现网页变灰功能?

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

时间:2022-12-02 15:01:21 阅读:1634次 来源:互联网

今天来从前端的角度看看网页置灰是如何实现的,以及相关使用技巧!

实现思路

先来看看一些主流网站是如何实现置灰的:

BiliBili:

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

京东

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

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

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

简单来说,filter 属性就是用来给元素添加不同的滤镜。该属性中支持传入多种 Filter 函数,其中 grayscale() 函数就是用于置灰的关键。grayscale() 函数将改变输入图像灰度,该函数有一个参数,表示转换为灰度的比例。当值为 100% 时,完全转为灰度图像;当值为 0% 时图像无变化。值在 0% 到 100% 之间,则是效果的线性乘数。若未设置值,默认是 0。

因此,只要将页面 html 元素设置以下样式即可实现页面置灰:

html {
     filter: grayscale(100%);
}

那为啥很多网站的置灰不止这一条呢?可以看到京东的置灰代码如下:

html.o2_gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

其实这些属性最终的实现效果都是一样的,它们为了对 filter 属性进行兼容。filter 属性是 CSS3 增加的属性,在不同浏览器以及低版本浏览器上,filter 属性的兼容性不尽相同:

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

对于上面的代码,其中:

  • -webkit-filter: 带有 webkit 前缀可以在 webkit 内核的浏览器中生效;
  • -moz-filter:带有 moz  前缀可以在 Firefox 浏览器中生效;
  • -ms-filter:带有 ms 前缀可以在 IE 浏览器生效;
  • -o-filter:带有 o 前缀可以在 Opera 浏览器生效;

最后三行都是为了兼容 IE 内核的浏览器。

那如何实现动态添加呢?只需要将这些滤镜属性写在一个类中,在需要的时候动态的将该类型添加到 html 标签上即可。

.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-filter: gray;
    filter: gray;
    -webkit-filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
    filter: progid:dximagetransform.microsoft.basicimage(grayscale=1);
}

以上就是前端如何实现网页变灰功能使用详解的详细内容,更多关于前端如何实现网页变灰功能的资料请关注码农网其它相关文章!

您可能感兴趣的文章:

本文地址:https://www.manongw.com/article/460.html

文章来源:码农网

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了JS pushlet XMLAdapter适配器用法案例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:00
  • 本文主要介绍了使用TS来编写express服务器的方法步骤的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-30 09:26
  • 本文主要介绍了JSON stringify方法原理及实例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-24 10:11
  • 本文主要介绍了详解JavaScript 高阶函数的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:47
  • 本文主要介绍了详解webpack的clean-webpack-plugin插件报错的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:06
  • 本文主要介绍了JavaScript setTimeout()基本用法有哪些的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-04 22:05
  • 本文主要介绍了原生JS实现弹幕效果的简单操作指南的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 16:04
  • 本文主要介绍了JS实现简单贪吃蛇小游戏的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-29 08:59
  • 本文主要介绍了JavaScript实现串行请求的示例代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:25
  • 本文主要介绍了JavaScript 实现轮播图特效的示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 16:59