爱刷s0147 | 浏览 109 次
我有更好的答案
发布于2013-11-08 22:36最佳答案
<script language=JavaScript
document.body.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(GrayScale=1)"
</script
方法二：把网页变成灰色显示的最简单的代码是在head之间加入如下代码：
<style type="text/css"
html {FILTER: gray}</style方法三：把网页变成灰色显示的另外一种方法是在head之间加入如下代码：
<style type="text/css"<!--BODY {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}--</style方法四：如果你的网站已经有CSS文件，那么只需要加入如下代码即可：
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}
方法五：我比较推荐这种做法，在CSS文件中加入如下代码即可：
html{filter:gray()}
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}
方法六：如果网站的CSS中已有BODY{}，那么直接加入如下代码即可：
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)比如：BODY {font-size: 12pxmargin: 0pxcoclor: #000background: #fff
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)}
在运用以上方法进行网页更改的时候，可能会遇到以下的问题，具体的解决方法仅供参考：
只是表示当前状态该样式未被调取，:visited 是选择器用于选取已被访问的链接，就是之前的链接地址已经被点击访问过了，那么这个样式才会被调取或者显示出效果来，没点击就不会调取其实你给字体或者背景直接加一个red红色再进行操作一次，这样就会有更直观的体现
Css中将图片调为灰色，是利用滤镜的效果进行渲染的
不同的浏览器需要不同的前缀进行支持。
具体将图片调整为灰色的代码如下
img {filter: grayscale(100%) //默认
-webkit-filter: grayscale(100%) //谷歌浏览器
-moz-filter: grayscale(100%) //火狐浏览器
-ms-filter: grayscale(100%) //IE核心浏览器
-o-filter: grayscale(100%) //Oprea浏览器
-webkit-transition:all 1s ease-in-out //这是设置过渡时间效果，有一个缓冲时间
-o-transition:all 1s ease-in-out
-moz-transition:all 1s ease-in-out
-ms-transition:all 1s ease-in-out
}
若需要调整为彩色
img：hover{
filter: grayscale(0%) //默认
-webkit-filter: grayscale(0%) //谷歌浏览器
-moz-filter: grayscale(0%) //火狐浏览器
-ms-filter: grayscale(0%) //IE核心浏览器
-o-filter: grayscale(0%) //Oprea浏览器
-webkit-transition:all 1s ease-in //这是设置过渡时间效果，有一个缓冲时间
-o-transition:all 1s ease-in
-moz-transition:all 1s ease-in
-ms-transition:all 1s ease-in
}
