css3greyscale实现去色css3实现图片或页面变为黑白效果-创新互联

今天帮朋友看一效果，看到了手标滑过图片变为彩色的效果，很简单又兼容各大浏览器的，无非是准备两张图，一张黑白，一张彩色，滑过切换背景图或直接切换图片方法，当然，谁也不想这么复杂操作。

下面用css3安排下：

给标签加上下方css代码，即可变为黑白，也就是去色

我们注重客户提出的每个要求，我们充分考虑每一个细节，我们积极的做好成都网站设计、成都网站建设服务，我们努力开拓更好的视野，通过不懈的努力，成都创新互联公司赢得了业内的良好声誉，这一切，也不断的激励着我们更好的服务客户。 主要业务：网站建设,网站制作,网站设计,微信小程序开发,网站开发,技术开发实力，DIV+CSS，PHP及ASP，ASP.Net，SQL数据库的技术开发工程师。

filter: grayscale(100%);
filter: gray;

安排下兼容写法

-webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;

如果要做滑过变为彩色，举个列子，网站页面一排排图片，均加了上方代码，变为黑白的，然后滑过让恢复颜色，如下方代码

初始代码

img{
    filter: grayscale(100%);
    filter: gray;
}

滑过代码

img :hover{
    filter: grayscale(0);
    filter: none;
}

整个网站页面变为黑白色，直接加给 html 即可安排

本文详情 http://www.sharedblog.cn/?post=186

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：css3greyscale实现去色css3实现图片或页面变为黑白效果-创新互联
转载源于：http://bzwzjz.com/article/dpsojg.html