过滤灰色图像,黑色环绕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 像素。如果你将它们裁剪到合适的尺寸，这样它们就不会成为外部额外的透明空间，问题就会消失吗？