0

我一直在关注此 Q&A 以在我的图像上设置灰度和透明度，并使它们在 :hover 上恢复正常， 在 HTML/CSS 中将图像转换为灰度

它适用于 safari/chrome，但由于某种原因它不能在 Firefox 上运行。图像只是不可见，但 :hover 有效（图像看起来像它们应该的那样，通常）

我已经更新了我的 .htaccess 并联系了 GoDaddy 支持，在进行测试后告诉我 .svg MIME 类型已在服务器上注册并正常工作。我也有离线问题，所以我想这是我的 .css 的 .svg 的问题，但无法弄清楚是什么，因为我尝试了不同的解决方案，结果相同。

我的过滤器.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
     baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
    <filter id="desaturate">
        <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>

我的风格.css

.logos img {
    filter: url(filters.svg#grayscale); 
    filter: gray;
    -webkit-filter: grayscale(1);
    margin: 10px 20px 10px 20px;
    opacity: .5;
}

.logos img:hover {
    filter: none;
    -webkit-filter: grayscale(0);
    opacity: 1;
}

提前非常感谢，乔:)

4

1 回答 1

3

您的过滤器 ID 在 filter.svg 中是“去饱和”的。这与您在 CSS 中调用的内容不匹配（您称其为“灰度”）。更改您的 css 以使用filters.svg#desaturate或更改 svg 文件以使用<filter id="grayscale">.

于 2012-07-11T13:36:31.543 回答