天津爆炸,百度搜索结果页面变灰色,filter grayscale 到底怎么个兼容?


百度页面如下:

https://www.baidu.com/s?cl=3 &tn=baidutop10&fr=top1000&wd=%E5%A4%A9%E6%B4%A5%E7%88%86%E7%82%B8%E8%87%B4112%E6%AD%BB&rsv_idx=2

变为灰色了,IE8及以下还是彩色,未起作用。

有没有熟悉filter属性的大神,给详细介绍下它的兼容性及使用注意事项,我看grayscale(100%)还有grayscale(1)。

css3 HTML html5 css

ぁD日D花 9 years, 8 months ago

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>赴汤蹈火英雄壮举照日月,舍生忘死烈士忠魂耀乾坤。</title>
<style>
html {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
</style>
</head>
<body>
    <h1>赴汤蹈火英雄壮举照日月,舍生忘死烈士忠魂耀乾坤。</h1>
    <img src="http://i.guancha.cn/news/2015/08/16/20150816185340908.jpg">
</body>
</html>

上面的代码,Firefox、Chrome、IE8/IE7都能实现页面变灰以表示哀悼。
图片描述

亚啦那一卡 answered 9 years, 8 months ago

推荐你 这篇文章

马勒隔壁沙滩 answered 9 years, 8 months ago

谢谢 @eechen eechen ,IE 确实特殊;

我看filter后面还可以跟很多种其他特效:filter 是css3新属性吗,还是IE 很早之前就有了这个属性了,


 blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url() 
custom()

wlolc answered 9 years, 8 months ago

Your Answer