过滤灰色图像，黑色环绕png ie8

Question

我对一些使它们变灰的图像进行过滤，只悬停在它们上面使它们变成颜色：

.bxslider2 img {
   display: inline;
   float: left;
   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 3.5+ */
   filter: gray; /* IE6-9 */
   -webkit-filter: grayscale(100%);
   -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
}
.bxslider2 img:hover {
   filter: none;
   -webkit-filter: grayscale(0%);
   -moz-filter:grayscale(0%);
}  

我想保留那些代码，但我在ie8上遇到问题 - 只有在那里我看到图像周围的黑色。我找到了解决方案，但是这个解决方案删除了​​灰色过滤器，我无法找到合并它的方法：

.bxslider2 img {
   background: transparent;
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
   zoom: 1;
}

此代码删除图像周围的黑色 - 这很好，但它也删除了灰色效果。如何保持灰色过滤器+移除png周围的黑色？

Answer 1

我想我可能会为您提供更简单的解决方案。关闭你添加的ie8 css时，唯一导致问题的图像是在圆圈外有空间的图像。

当我选择那些有问题的图像时，在圆圈外面的透明空间大于没有问题的图像时，请看这里：

看起来所有没有黑色边框的图像都是76x75像素，有问题的图像是85x85像素。如果你将它们缩小到合适尺寸以便外面没有额外的透明空间，问题会消失吗？

Answer 2

要回答“我如何保留灰色滤镜+删除png周围的黑色？”

第一

您需要了解所有希望应用的过滤器必须在一次filter调用中进行。所以接下来的事情（但请注意......

progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)

...是IE5.5 +等同于IE4 filter: gray;，see here）：

.bxslider2 img {
   background: transparent;
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)
                progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)"; /* IE8 */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
   zoom: 1;
}

这是因为第二次调用filter渐变会覆盖正常css级联规则中代码中filter: gray的第一次调用。

第二

gradient是一种特殊类型的过滤器，procedural surface，它并不总能很好地与其他“静态过滤器”配合使用，因此无法保证将两者组合在一起如上所述实际上解决了问题（如果没有，可能没有解决它）。正如你在这里通过我的笔记收集的那样，我还没有测试过这是否能解决你的问题，但问题的根源是我上面的“第一点”。 IE8是否能与自己的过滤器配合使用以解决您的问题，这与在一个元素上保留两个过滤器实际上是一个“不同”的问题。