您的位置:首页 >> WEB开发 >> 一条CSS实现全站变灰 — 再也不用替换图片了
一条CSS实现全站变灰 — 再也不用替换图片了
[ 孤狼 | 2020-06-13 07:53:51 | WEB开发 | 228°C | 0条评论 ]

在文明的发展过程中,偶尔会出现一两次灾难,互联网为了缅怀灾难带来的痛苦,形成了一种特殊的缅怀方式——全站变灰。通过这种卸下色彩的方式来纪念过去。虽然我们需要这么做,但同时会给运维人员带来很大困扰,他们需要把整个站点弄成灰色,听起来就不容易。而今天,给他们的福利来了。一条CSS实现全站变灰。


我们先来看看这条CSS

html{
    -webkit-filter:grayscale(100%);
    -moz-filter:grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    _filter:none
}


操作步骤

只需要把上面的CSS代码添加到网站的公共CSS文件里,放在全局html定义之后。这样才能覆盖全局html的样式。


实现效果



实现原理  

我们看到这条CSS里主要的属性就是 filter 那么这个属性是什么意思呢?

filter 属性定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。

它可以设置的值有  none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url(); 

这里我们用到的就是grayscale灰度。

倒数第二行的  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  对,你猜的没错,就是为了照顾古老的IE浏览器。

不过最新的微软 Edge 浏览器也放弃挣扎使用Chromium内核了,以后不用针对IE再多说废话了。




转载请注明出处:http://gl.paea.cn/n.php?n=141
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索