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

filter.svgのフィルターIDは「彩度が低い」です。これは、CSSで呼び出しているもの（「グレースケール」と呼んでいるもの）とは一致しません。使用するようにcssを変更するfilters.svg#desaturateか、使用するようにsvgファイルを変更します<filter id="grayscale">。

于 2012-07-11T13:36:31.543 に答える