清明节如何实现网站变灰

最新推荐文章于 2022-01-07 21:41:02 发布

爱舔酸奶盖儿

最新推荐文章于 2022-01-07 21:41:02 发布

阅读量568

点赞数 1

文章标签： html5 css3 web javascript es6

本文链接：https://blog.csdn.net/weixin_45310445/article/details/105356719

版权

清明节当天，打开各大APP、网站发现页面全都一律变成了灰色，作为一枚前端渣，秉着虚心学习的态度，研究了下是如何实现的，发现用滤镜就可以实现了，当然，此’滤镜’非美颜相机的’滤镜’。

##方法一

直接在body上添加filter
body *{
-webkit-filter: grayscale(100%); /* webkit */
-moz-filter: grayscale(100%); /*firefox*/
-ms-filter: grayscale(100%); /*ie9*/
-o-filter: grayscale(100%); /*opera*/
filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); 
filter:gray; /*ie9- */
}

##方法二

在网页头部中的<head>标签内部加入内联CSS代码的形式实现网站网页变灰
<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

觉得以上两种方法不喜欢，很繁琐？没关系，接下去还有两种方法，总有一款你喜欢的。

##方法三

直接添加CSS样式
html {
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    -webkit-filter: grayscale(100%);
}

##方法四

修改<html>标签，在其内加上内联样式
<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);">

总而言之，方法都是一样的，只不过是调用的方式不同而已，换汤不换药。推荐方法一、三。

爱舔酸奶盖儿

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
清明节如何实现网站变灰

清明节当天，打开各大APP、网站发现页面全都一律变成了灰色，作为一枚前端渣，秉着虚心学习的态度，研究了下是如何实现的，发现用滤镜就可以实现了，当然，此’滤镜’非美颜相机的’滤镜’。##方法一直接在body上添加filterbody *{-webkit-filter: grayscale(100%); /* webkit */-moz-filter: grayscale(100%); ...
复制链接

扫一扫