Question

这是我的css：

.categorys img
{
    cursor: pointer;
    margin: 10px 0px 10px 8px;
    filter: url(filters.svg#grayscale);
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    filter: gray; /* For IE 6 - 9 */
    -webkit-transition: all .6s ease;
}

.categorys img:hover
{
    filter: none;
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}

我在本地运行时工作正常。但是当我将它上传到服务器（在网络上）时，firefox上的灰度图像是不可见的。

顺便说一句，在悬停时它会移除灰度效果并且图像可见

我试图使用此代码：

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上正常工作，但它在Internet Explorer上不起作用（图像总是有正常的颜色）。

任何人都熟悉这个问题吗？

Firefox灰度仅适用于本地

0 个答案: