CSS滤镜灰度在Firefox中不工作 [英] CSS filter grayscale not working in Firefox

问题描述

我遇到麻烦，从灰度转换到彩色，它的工作原理是铬，但这是它。

I'm having troubles doing a transition from grayscale to colored, it works in chrome, but that is it.

这是HTML：

<div id="post" style="background-image:url('bg.png');background-repeat:no-repeat;">
    <p><a href="/post.php?id=1">Title - Date</a></p>
</div>

以下是CSS：

#post{
    padding:0;
    margin:0 auto;
    margin-bottom:25px;
    border:solid 1px #000;
    height:150px;
    width:750px;
    display:block;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'saturate\' values=\'0.5\'/></filter></svg>#grayscale");
    filter: gray alpha(opacity=50);
    -webkit-filter: grayscale(50%);
    -webkit-transition: 0.3s all ease;
    -o-transition: 0.3s all ease;
    -moz-transition: 0.3s all ease;
    transition: 0.3s all ease;
    -webkit-backface-visibility: hidden;
}

#post:hover{
    filter: none;
    -webkit-filter: grayscale(0%);
}

感谢任何帮助，谢谢。

推荐答案

尝试将#post：hover设置为

Try setting #post:hover to this:

  filter:grayscale(0%); 
  -webkit-filter: grayscale(0%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");

您可以在这里查找。 http://www.cheesetoast.co.uk/ add-grayscale-images-hover-css-black-white /

You can look it up here. http://www.cheesetoast.co.uk/add-grayscale-images-hover-css-black-white/

在教学链接失效的情况下
适用于：Safari 6.1.1，Firefox 26.0，Chrome 32.0.1700.77

in case tutorial link will be dead works in: Safari 6.1.1, Firefox 26.0, Chrome 32.0.1700.77

.slides li img{
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%); /* For Webkit browsers */
  filter: gray; /* For IE 6 - 9 */
  -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */
  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 */
}
.slides li img:hover{
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}

如下Adam所示：
从Firefox 35过滤器：灰度（100％）;应该工作。

这篇关于CSS滤镜灰度在Firefox中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！