灰度背景Css图像

我在网上搜了很多，但我找不到一个跨浏览器解决方案，以褪色的CSS背景图像灰度和回。灰度背景Css图像

唯一的工作解决方法是使用CSS3过滤灰阶：

-webkit-filter: grayscale(100%);

但这个工程只是使用Chrome 15节+和Safari .6 + （你可以在这里看到：http://css3.bradshawenterprises.com/filters/）

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

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 */

（你可以在这里看到：http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html）

但实际上它似乎不适用于css背景图像，就像webkit过滤器一样。

有没有解决方案（可能与jQuery？）来破解这种缺乏对不太高级的浏览器上的筛选器的支持？

来源

2013-05-02 bluantinoo

你有没有尝试过这样的：http://stackoverflow.com/a/8612047/1298944 – 2013-05-03 05:18:11

另外，看看这个：http://stackoverflow.com/a/7273987/1298944 – 2013-05-03 05:46:15

我还没绑，我会第一时间反馈我的，谢谢现在 – bluantinoo 2013-12-12 19:36:08

在这里你去：

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

在Firefox，Chrome和IE浏览器进行了测试。我还附上了一张图片来展示我的实施结果。 Grayscale Background Image in DIV Sample

编辑：另外，如果你想要的形象只是来回切换使用jQuery，下面是该页面的源代码...我已经列入本网站链接的jQuery和和形象，不在线，所以你应该只能够复制/粘贴来测试它：

<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（对于IE10-11用户）：上述解决方案将不会与微软浏览器作出的后期变化工作，所以这里有一个更新的解决方案，可以让你对图像进行灰度（或去饱和）处理。

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

来源

2014-02-20 05:33:39 Element808

Hello元素，实际上这是我一直这样做的方式。我只是希望全景已经发展，我不需要建立一个双层布局！但是，无论如何感谢:) – bluantinoo 2014-02-21 12:51:29

@bluantinoo - 不客气:)你是什么意思的双层布局？另外，我相信我给你的解决方案正是你所要求的。您的具体要求/问题是“跨浏览器解决方案，将css背景图像淡化为灰度并返回”和“是否有任何解决方案（可能使用jquery？）来破解对不太先进的浏览器上的筛选器缺少支持？为淡入灰色的解决方案。这就是我提供给你的。我错过了什么吗？ – Element808 2014-02-21 19:00:23

你其实是对的，但由于我的问题很老，我只是希望浏览器现在可以支持更简单的CSS规则来翻转灰色背景图像。对于双层布局，我指的是您提出的第一个解决方案（两个元素堆叠，一个灰色，另一个着色）。最后，我必须说，你的第二个选择可能是我最喜欢的，因为它允许更灵活的使用。此外，我的问题太老了，以至于我在标记你的答案，不仅在工作，而且甚至解释得很好！再次感谢:) – bluantinoo 2014-02-22 23:11:13

-4

你并不需要真正使用复杂的编码！

灰度悬停：

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

灰度 “悬停出”：

-webkit滤波器：灰度（0％）;

我只是让我的css类有一个单独的悬停类，并添加到第二个灰度。如果你真的不喜欢复杂性，这很简单。

来源

2014-12-19 04:01:20 Aria

那么非webkit浏览器呢？ – bluantinoo 2015-01-08 20:02:47

-4

您还可以使用：

img{ 
    filter:grayscale(100%); 
} 


img:hover{ 
    filter:none; 
}

来源

2015-06-19 12:29:46 Greenfield

我问了背景图像在CSS中，而不是img HTML中的元素 – bluantinoo 2015-06-23 14:46:30

使用目前的浏览器，你可以使用它像这样：

img { 
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ 
    filter: grayscale(100%); 
}

，并解决它：

img:hover{ 
    -webkit-filter: grayscale(0%); /* Chrome, Safari, Opera */ 
    filter: grayscale(0%); 
}

与我一起工作，是矮得多。甚至有更多的人能在CSS中做：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | 
     hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

欲了解更多信息和支持的浏览器看到：http://www.w3schools.com/cssref/css3_pr_filter.asp

来源

2016-09-12 10:50:40

这对背景图像不起作用 – Tijmen 2017-03-08 17:10:14

适用于我的背景图像... – 2017-09-18 08:52:08

灰度背景Css图像

回答

相关问题