资讯专栏INFORMATION COLUMN

哀悼日网站全站变灰CSS代码

SKYZACK / 3323人阅读

摘要:今天是是南京大屠杀公祭日。不少相关站点都将网站全部变为灰色,以表示哀悼。为了更多的小伙伴可以达成这种效果,在哀悼日可以表达一份哀悼。看下腾讯大苏网这种效果是用纯来实现的。

今天是2016.12.13是南京大屠杀公祭日。不少相关站点都将网站全部变为灰色,以表示哀悼。

为了更多的小伙伴可以达成这种效果,在哀悼日可以表达一份哀悼。我们今天也来给出相关方法。

看下腾讯大苏网

这种效果是用纯CSS来实现的。

filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);

如果你想全站变灰,代码如下

*{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

如果你想只对于网站图片来实现灰度,代码如下

img{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

如果只想针对部分图片,代码如下

/*这段代码只会对于class位grey的图片*/
img.grey{
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
}

这是互联网行业的哀悼方式。

12.13大屠杀逝者安息

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115419.html

相关文章

  • 悼日网站全站变灰CSS代码

    摘要:今天是是南京大屠杀公祭日。不少相关站点都将网站全部变为灰色,以表示哀悼。为了更多的小伙伴可以达成这种效果,在哀悼日可以表达一份哀悼。看下腾讯大苏网这种效果是用纯来实现的。 今天是2016.12.13是南京大屠杀公祭日。不少相关站点都将网站全部变为灰色,以表示哀悼。 为了更多的小伙伴可以达成这种效果,在哀悼日可以表达一份哀悼。我们今天也来给出相关方法。 看下腾讯大苏网 showImg(h...

    superw 评论0 收藏0
  • 如果遇上需要让网站变灰色,作为站长的我们该怎么做

    摘要:看到标题,当然如果你是程序员童鞋,可以绕道了,这只是总结的一些技巧而已,一般在全国哀悼日,大地震的日子,清明节,我们都会让自己的网站全站灰色,以表示对逝者的悼念。本文出自今日头条文章由甲爪联盟整理编辑 看到标题,当然如果你是web程序员童鞋,可以绕道了,这只是总结的一些技巧而已,一般在全国哀悼日,大地震的日子,清明节,我们都会让自己的网站全站灰色,以表示对 逝者的悼念。好了言归正传。 ...

    Aomine 评论0 收藏0
  • 利用CSS改变图片颜色的100种方法!

    摘要:前言说到对图片进行处理,我们经常会想到这类的图像处理工具。或者是的时候,对图片的对比度,阴影进行处理。过滤器通常被用于调整图片,背景和边界的渲染。最后,安利我们的公众号前端指南。 前言 说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影...

    Keven 评论0 收藏0
  • 利用CSS改变图片颜色的100种方法!

    摘要:前言说到对图片进行处理,我们经常会想到这类的图像处理工具。或者是的时候,对图片的对比度,阴影进行处理。过滤器通常被用于调整图片,背景和边界的渲染。最后,安利我们的公众号前端指南。 前言 说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影...

    pinecone 评论0 收藏0
  • 收集整理适用博客建站免费开源Wordpress主题-简约好看的WP主题

    摘要:最重要的就是找一个适合自己的主题了。事实上,免费主题也非常多,而且很多的免费主题在功能上和界面美观上已经大大超过了付费的主题。加上这些主题都是开源的,基本上可以在上找得到源码,安全性是没有问题,主题的作者也在不断更新当中。WordPress最重要的就是找一个适合自己的主题了。好一点的WordPress主题基本上都是要收费的,而且价格还不便宜,这导致了不少的新手朋友们很为难。而有时我们仅仅根据...

    番茄西红柿 评论0 收藏2637

发表评论

0条评论

SKYZACK

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<