问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
中大凤凰树
    69931520

    百度页面如下：

    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)。

    htmlhtml5csscss3
    阅读 4.7k
    3 个回答
    得票最新
    头像
    eechen
      15.1k51729
      ✓ 已被采纳
      <!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都能实现页面变灰以表示哀悼。
      图片描述

      头像
      中大凤凰树
        69931520

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

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

        blur()
brightness()
contrast()
drop-shadow()
grayscale()
hue-rotate()
invert()
opacity()
saturate()
sepia()
url() 
custom()
        头像
        funkyLover
          2.2k136073
          撰写回答
          你尚未登录，登录后可以
          • 和开发者交流问题的细节
          • 关注并接收问题和回答的更新提醒
          • 参与内容的编辑和改进，让解决方法与时俱进
          推荐问题