灰度背景图像的CSS [英] Greyscale Background Css Images

查看：1538 发布时间：2016/8/1 9:43:41 css image background cross-browser grayscale

本文介绍了灰度背景图像的CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在网上搜索了很多，但我无法找到一个跨浏览器解决方案褪色一个css backgrund图像为灰度和背部。

唯一可行的解决方案是应用CSS3过滤灰阶：

  -webkit-过滤器：灰度（100％）;

但这个工程只是使用Chrome 15节+和Safari 6节+
（你可以在这里看到：<一href=\"http://css3.bradshawenterprises.com/filters/\">http://css3.bradshawenterprises.com/filters/)

许多网页在线谈到这个解决方案变成灰色元素：

 过滤：URL（数据：图像/ SVG + XML; UTF8，＆LT; SVG的xmlns = \\'HTTP：//www.w3.org/2000/svg \\'＆GT ;＆LT;过滤器ID = \\'灰度\\'＆GT;＆LT; feColorMatrix类型= \\'矩阵\\'值= \\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 \\/ ＆GT;＆下; /滤光器＆gt;＆下; / SVG＆GT; #grayscale）; / * 10+火狐，火狐在Android * /
过滤：灰色; / * * IE6-9 /

（你可以在这里看到：<一href=\"http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html\">http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)

但实际上它似乎并不为CSS背景图像工作，因为WebKit的过滤器做的。

是否有任何解决方案（也许与jQuery？）破解这种缺乏过滤器支持对后进的浏览器？

解决方案

在这里你去：

 ＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT;头=服务器＆GT;
＆LT;标题＆GT; bluantinoo CSS灰度背景图像采样＆LT; /标题＆GT;
＆LT;风格类型=文/ CSS＆GT;
    DIV {
        边框：1px的纯黑色;
        填充：5像素;
        保证金：5像素;
        宽度：600px的;
        高度：600像素;
        浮动：左;
        颜色：白色;
    }
     .grayscale {
         背景：网址（yourimagehere.jpg）;
         -moz-过滤：URL（数据：图像/ SVG + XML; UTF8，＆LT; SVG的xmlns = \\'HTTP：//www.w3.org/2000/svg \\'＆GT;＆LT;过滤器ID = \\'灰度\\'＆GT;＆LT; feColorMatrix类型= \\'矩阵\\'值= \\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 \\/＆GT;＆LT; /滤光器＆gt;＆LT; / SVG＆GT; #grayscale）;
         -o-过滤：URL（数据：图像/ SVG + XML; UTF8，＆LT; SVG的xmlns = \\'HTTP：//www.w3.org/2000/svg \\'＆GT;＆LT;过滤器ID = \\'灰度\\'＆GT;＆LT; feColorMatrix类型= \\'矩阵\\'值= \\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 \\/＆GT;＆LT; /滤光器＆gt;＆LT; / SVG＆GT; #grayscale）;
         -webkit-过滤器：灰度（100％）;
         过滤：灰色;
         过滤：URL（数据：图像/ SVG + XML; UTF8，＆LT; SVG的xmlns = \\'HTTP：//www.w3.org/2000/svg \\'＆GT;＆LT;过滤器ID = \\'灰度\\'＆GT ;＆LT; feColorMatrix类型= \\'矩阵\\'值= \\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 \\/＆GT;＆LT; /滤光器＆gt;＆LT; / SVG＆GT; #grayscale）;
     }    .nongrayscale {
        背景：网址（yourimagehere.jpg）;
    }
＆LT; /风格＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT; DIV CLASS =nongrayscale＆GT;
        这是在血糖图像的非灰度
    ＆LT; / DIV＆GT;
    ＆LT; DIV CLASS =灰度＆GT;
        这是在血糖图像的灰度
    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

在Firefox，Chrome和IE浏览器进行了测试。我还附有图片显示我的我实现这个结果。

编辑：同时，如果你想要的形象，只是来回切换使用jQuery，这里的页面，该源......我已经包含的网页链接到jQuery和和图像这是在网上，所以你就应该能够复制/粘贴来测试一下：

 ＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT;头=服务器＆GT;
＆LT;标题＆GT; bluantinoo CSS灰度背景图像采样＆LT; /标题＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.11.0.min.js＆GT;＆下; /脚本＆GT;
＆LT;风格类型=文/ CSS＆GT;
    DIV {
        边框：1px的纯黑色;
        填充：5像素;
        保证金：5像素;
        宽度：600px的;
        高度：600像素;
        浮动：左;
        颜色：白色;
    }
     .grayscale {
         背景：网址（http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg）;
         -moz-过滤：URL（数据：图像/ SVG + XML; UTF8，＆LT; SVG的xmlns = \\'HTTP：//www.w3.org/2000/svg \\'＆GT;＆LT;过滤器ID = \\'灰度\\'＆GT;＆LT; feColorMatrix类型= \\'矩阵\\'值= \\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 \\/＆GT;＆LT; /滤光器＆gt;＆LT; / SVG＆GT; #grayscale）;
         -o-过滤：URL（数据：图像/ SVG + XML; UTF8，＆LT; SVG的xmlns = \\'HTTP：//www.w3.org/2000/svg \\'＆GT;＆LT;过滤器ID = \\'灰度\\'＆GT;＆LT; feColorMatrix类型= \\'矩阵\\'值= \\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 \\/＆GT;＆LT; /滤光器＆gt;＆LT; / SVG＆GT; #grayscale）;
         -webkit-过滤器：灰度（100％）;
         过滤：灰色;
         过滤：URL（数据：图像/ SVG + XML; UTF8，＆LT; SVG的xmlns = \\'HTTP：//www.w3.org/2000/svg \\'＆GT;＆LT;过滤器ID = \\'灰度\\'＆GT ;＆LT; feColorMatrix类型= \\'矩阵\\'值= \\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0 \\/＆GT;＆LT; /滤光器＆gt;＆LT; / SVG＆GT; #grayscale）;
     }    .nongrayscale {
        背景：网址（http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg）;
    }
＆LT; /风格＆GT;
    ＆LT;脚本类型=文/ JavaScript的＆GT;
        $（文件）。就绪（函数（）{
            $（＃图像）。鼠标指向（函数（）{
                $（nongrayscale）removeClass移除（）fadeTo（400,0.8）.addClass（灰度）fadeTo（400，1）。。。;
            }）;
            $（＃图像）。鼠标移开（函数（）{
                $（灰度）removeClass移除（）fadeTo（400，0.8）.addClass（nongrayscale）fadeTo（400，1）。。。;
            }）;
        }）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
    ＆LT; DIV ID =形象CLASS =nongrayscale＆GT;
        侧翻此图片灰阶切换
    ＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;

编辑2（对于IE10-11用户）：上述解决方案将不会与微软浏览器为晚所做的修改工作，所以这里是一个更新的解决方案，让您为灰度（或饱和度）图像。

＆LT; SVG＆GT;\r
  ＆LT;＆DEFS GT;\r
    ＆LT;过滤器的xmlns =http://www.w3.org/2000/svgID =去色＆GT;\r
      ＆LT; feColorMatrix TYPE =饱和值=0/＆GT;\r
    ＆LT; /滤光器＆gt;\r
  ＆LT; / DEFS＆GT;\r
  ＆lt;图像的XLink：HREF =http://www.polyrootstattoo.com/images/Artists/Buda/40.jpgWIDTH =600HEIGHT =600过滤器=URL（#desaturate）/＆GT;\r
＆LT; / SVG＆GT;

I've searched a lot on the web but I cannot find a cross browser solution to fade a css backgrund image to greyscale and back.

The only working solution is to apply CSS3 filter greyscale:

-webkit-filter: grayscale(100%);

but this works just with Chrome v.15+ and Safari v.6+ (as you can see here: http://css3.bradshawenterprises.com/filters/)

Many pages online speaks about this solution to grey out elements:

filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */

(as you can see here:http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)

But actually it does not seem to work for css background images, as the webkit filter do.

Are there any solution (maybe with jquery?) to hack this lack of support for filter on less advanced browsers?

解决方案

Here you go:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<style type="text/css">
    div {
        border: 1px solid black;
        padding: 5px;
        margin: 5px;
        width: 600px;
        height: 600px;
        float: left;
        color: white;
    }
     .grayscale {
         background: url(yourimagehere.jpg);
         -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
         -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
         -webkit-filter: grayscale(100%);
         filter: gray;
         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     }

    .nongrayscale {
        background: url(yourimagehere.jpg);
    }
</style>
</head>
<body>
    <div class="nongrayscale">
        this is a non-grayscale of the bg image
    </div>
    <div class="grayscale">
        this is a grayscale of the bg image
    </div>
</body>
</html>

Tested it in FireFox, Chrome and IE. I've also attached an image to show my results of my implementation of this.

EDIT: Also, if you want the image to just toggle back and forth with jQuery, here's the page source for that...I've included the web link to jQuery and and image that's online so you should just be able to copy/paste to test it out:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>bluantinoo CSS Grayscale Bg Image Sample</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<style type="text/css">
    div {
        border: 1px solid black;
        padding: 5px;
        margin: 5px;
        width: 600px;
        height: 600px;
        float: left;
        color: white;
    }
     .grayscale {
         background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
         -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
         -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
         -webkit-filter: grayscale(100%);
         filter: gray;
         filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     }

    .nongrayscale {
        background: url(http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg);
    }
</style>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#image").mouseover(function () {
                $(".nongrayscale").removeClass().fadeTo(400,0.8).addClass("grayscale").fadeTo(400, 1);
            });
            $("#image").mouseout(function () {
                $(".grayscale").removeClass().fadeTo(400, 0.8).addClass("nongrayscale").fadeTo(400, 1);
            });
        });
</script>
</head>
<body>
    <div id="image" class="nongrayscale">
        rollover this image to toggle grayscale
    </div>
</body>
</html>

EDIT 2 (For IE10-11 Users): The solution above will not work with the changes Microsoft has made to the browser as of late, so here's an updated solution that will allow you to grayscale (or desaturate) your images.

<svg>
  <defs>
    <filter xmlns="http://www.w3.org/2000/svg" id="desaturate">
      <feColorMatrix type="saturate" values="0" />
    </filter>
  </defs>
  <image xlink:href="http://www.polyrootstattoo.com/images/Artists/Buda/40.jpg" width="600" height="600" filter="url(#desaturate)" />
</svg>

这篇关于灰度背景图像的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

灰度背景图像的CSS [英] Greyscale Background Css Images

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

灰度背景图像的CSS [英] Greyscale Background Css Images

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭