html – 过滤灰色图像,黑色环绕png ie8

概述我对一些使它们变灰的图像进行了过滤,只悬停在它们上面使它们变成颜色： .bxslider2 img { display: inline; float: left; filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feCo 我对一些使它们变灰的图像进行了过滤,只悬停在它们上面使它们变成颜色：

.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周围的黑色？

解决方法 我想我可能会有一个更简单的解决方案.关闭你添加的ie8 CSS时,唯一导致问题的图像是在圆圈外有空间的图像.

当我选择图像时,有问题的图像在圆圈外面的透明空间大于没有的图像：

看起来所有没有黑色边框的图像都是76×75像素,有问题的图像是85×85像素.如果你将它们缩小到合适的尺寸,这样外面没有额外的透明空间,问题就会消失吗？

总结

以上是内存溢出为你收集整理的html – 过滤灰色图像,黑色环绕png ie8全部内容，希望文章能够帮你解决html – 过滤灰色图像,黑色环绕png ie8所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。