β

css网站变灰色调

polande 8 阅读

当别人受到伤害的时候,我们所能做的就是冷静理智的去做自己力所能及的事情。

今天临时接到通知,说天津爆炸,网站尽量保持灰黑色调,而且今天中午之前完成。so,本以为会很麻烦的事情,而且以前也没有做过在网上找了一下方案,发现并不是想象中的那么难。
其实只需要在外部html加上一个滤镜效果即可。
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;
        filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'>       <filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
}

上面代码加了兼容的,亲测在ie789 chrome,ff可行,但是ie10不行不知道为什么。
现在仍然找不到原因。
最后一个利用svg的其实是用来兼容火狐的。
很简单的一个效果,然而”万能的PM”变成灰色之后导航不好看,要让颜色做一下更改。
好,我改。
就是把颜色改一下不就完,然而不支持的ie10,11怎么办呢?
我做过ie css hack 但是没有做过专门高版本的hack呀。
查了一下,\9 是专门ie10,9,8,7的hack方式,但是不支持11呀,最后再万能的爆栈上找到了一个方法:
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
  /* IE10+ specific styles go here */
}

ok,解决了。
ps: 当时说要做这个效果的时候我还在想,是不是要重新写一套css呀,像更换主题一样,更换css。当时另一个产品线的pm,说了句以前没做过滤镜,我当时看到这句都没反应过来,现在回想,PM真的是万能的。

css网站变灰色调 最先出现在 polande

作者:polande
创新 开源 分享 思考
原文地址:css网站变灰色调, 感谢原作者分享。

发表评论