grayscalecss的简单介绍
css中怎么把照片调为灰度
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;
}
CSS怎么使网页全部变成灰色
如何设置网页全部灰色显示
爱刷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: 12px; margin: 0px; coclor: #000; background: #fff;
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
在运用以上方法进行网页更改的时候，可能会遇到以下的问题，具体的解决方法仅供参考：
求css灰度各大浏览器的兼容写法
webkit类浏览器谷歌chrome、苹果safari
-webkit-filter: grayscale(100%);
火狐
-moz-filter: grayscale(100%);
ie8
-ms-filter: grayscale(100%);
opera
-o-filter: grayscale(100%);
ie
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
为什么css谷歌有自己的一套样式比如grayscale
css谷歌有自己的一套样式比如grayscale。greyscale是css3filter里的一种属性，进行灰色滤镜。当然css3filter还有其它滤镜属性，很实用，例如：高斯模糊、调节亮度、色相旋转、饱和度等等。cssfilter这一用法允许将单个图像用于多个目的不同的图像，或者在浏览器中应用过滤器，而不是在图像编辑器中进行过滤，不会出现大小比原始图像大，从而可以更快地加载页面并减少数据传输。
css 图片变黑白效果 使用CSS将图片转换成黑白的 兼容方法
直接将其放入页面中的style/style即可，或者外部样式直接在内部引用。
html,body?{?
-webkit-filter:?grayscale(100%);?
-moz-filter:?grayscale(100%);?
-ms-filter:?grayscale(100%);?
-o-filter:?grayscale(100%);?
filter:?grayscale(100%);?
filter:?gray;?
}