Question

我一直在关注这个Q＆amp; A，为我的图像设置灰度和透明度，让它们恢复正常：悬停， Convert an image to grayscale in HTML/CSS

它适用于safari / chrome，但由于某种原因它无法在firefox上运行。图像只是不可见，但是：悬停工作（图像看起来像是应该的，通常是）

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

我的filter.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>

我的style.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;
}

提前多多感谢，乔：）

Answer 1

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

svg过滤器没有与godaddy一起使用FF

1 个答案: