专栏首页算法与编程之美网页|如何实现网页变灰效果

网页|如何实现网页变灰效果

2020年4月4日,星期六农历三月十二清明节。在以往的这一天或许并没有太多的特别之处。但今年我国正经历着一场浩劫,新冠肺炎席卷武汉和湖北地区,无数的白衣天使冲向一线,给中国人民构筑了一道坚固的抗疫长城。在这场战役中有一些英雄倒在了抗疫一线。如今,全国为在新冠肺炎中牺牲的英雄和失去生命的同胞降半旗默哀。

1.引言

在清明节这天几乎所有的网站都变成了灰色,那么这种效果是怎么实现的呢?今天就来简单的实现一下这样的效果。

图1.1 效果图

先简单的看一下这个网站最初的效果,下面开始将整个网站的变为灰色。

(1)可以在网站的源代码的css中改变网页的样式,为了改变整个网页的样式,肯定要将css代码放在最大的那个标签里面,一般网站是以<html>标签开始</html>标签结束,所以只需要将css所修饰的范围在<html>标签以内的所有东西。可以采用css里面的filter函数,让背景变成黑白色。

html {

       filter:  progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

       -webkit-filter:  grayscale(100%);

}

图1.2 效果图

这样网站就变成了黑白色,需要详细的了解filter函数的可以参考菜鸟教程里面的filter函数。

(2)css修饰有三种方式,所以三种方式都是可以的,这里就将剩下的方式列出来仅供参考。

<style type="text/css">

html {

filter:  progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter: grayscale(100%);}

</style>

<html style="filter:  progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

-webkit-filter:  grayscale(100%);">

通过这几种简单的方法就可以让网页变成灰色了。

(3)网站一经发布就会有不同的人去维护,还可以采用一种方式。大部分人的习惯都是将代码放在<body>标签里面,所以也可以通过<body>标签去修饰网页。为了能够在不同的浏览器里面兼容,于是设置了多重属性。

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- */

}

2.总结

以上几种方法,都是通过CSS的滤镜来控制页面的显示而已,唯一不同的就CSS代码调用的方式。在css的修饰时还有权重问题,所以有时候css代码不生效的时候可以考虑一下代码的权重问题。

愿天堂没有病痛!

END

编 辑 | 王楠岚

责 编 | 桂 军

where2go 团队

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:桂军

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-04-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python应用 | 读写docx文件 (值得收藏的技能)

    字处理软件是平时办公必备的同时也是最常用的软件之一,而字处理软件用的最多最频繁的就是微软的word,其扩展名为docx。在日常工作中,可能需要对很多的docx文...

    算法与编程之美
  • JAVA|牛客网题解

    最近由于期末考试结束,时间也相对比较轻松,所以最近去看了一下牛客网上面的一些题,偶尔做了一些练习题,对之前的知识点有一个复习。发现自己对很多知识点的理解还是很欠...

    算法与编程之美
  • Java实现常见排序算法(一)

    在开发过程中使用得比较多的算法就是排序算法和查找算法了,今天先盘点一下常见的排序算法中的两个大类交换排序和插入排序。

    算法与编程之美
  • 「特殊节日使用」全站增加灰色滤镜通用代码

    今年12月13日是第五个南京大屠杀死难者国家公祭日,每年的这一天,我们以国家之名祭奠,共同铭记历史

    沈唁
  • css3 greyscale实现去色 c

    py3study
  • 清明节网站变灰是如何实现的

    各大网站响应国家号召,将页面色调变为了灰色。作为一个技术仔,特别是前端技术仔必须一探究竟。

    奋飛
  • 探究网站变灰色那点事

    缅怀的同时,突然冒出一个问题,怎么做到的?难不成一个个调整图片,调整对应的控件色值?

    HLQ_Struggle
  • 60位+超强讲师阵容!中国云计算技术大会部分讲师议题公布

    用户1737318
  • win8降级win7步骤

    用户1127987
  • Apache Spark 1.6发布

    今天我们非常高兴能够发布Apache Spark 1.6,通过该版本,Spark在社区开发中达到一个重要的里程碑:Spark源码贡献者的数据已经超过1000人,...

    CSDN技术头条

扫码关注云+社区

领取腾讯云代金券