0

私は最新バージョンの Firefox を使用していますが、マスクを機能させる方法はありません。この問題に関するすべての議論を読みましたが、採用された解決策はどれも機能しません。

オブジェクトにも ID を割り当てました (マスクのファイルは SVG です)。

これがコードです

<img id="immy" src="http://www.hdwallpapersarena.com/wp-content/uploads/2012/05/22-amazing-landscape.jpg">

CSS

#immy
{
    -webkit-mask-image: url(cerchio.svg); /*chrome*/
    mask: url(cerchio.svg#cer); /*firefox*/
}

クロムではすべて正常に動作しますが、FF では完全な白いページしか表示されません (マスクがすべての画像を覆っている場合など)。

4

2 に答える 2

4

CSS マスクは、現在 Webkit にのみ実装されている実験的な機能です。現在、Firefox、Internet Explorer、またはその他の Webkit 以外のブラウザーでは完全にはサポートされていません。

ソース: http://caniuse.com/#search=mask

マスクは、SVG 要素のすべての主要なブラウザー (IE9+ を含む) でサポートされています。そのルートに行くと、どこでもはるかに一貫したエクスペリエンスが得られます. http://jsfiddle.net/jonathansampson/S7ctE/を参照してください

<svg width="100" height="100">
    <defs>
        <pattern id="a" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="http://i.imgur.com/7Nlcay7.jpg" x="0" y="0" width="100" height="100" />
        </pattern>
    </defs>
    <polygon fill="url(#a)" points="25 0, 50 0, 75 0, 100 25, 100 50, 100 75, 75 100, 50 100, 25 100, 0 75, 0 50, 0 25" />
</svg>
于 2013-03-09T17:53:50.147 に答える
0

Firefox のバージョンは 3.5 (1.9.1) 以降である必要があります。

このリンクで詳細を確認してください: https://developer.mozilla.org/en-US/docs/CSS/mask

于 2013-03-09T18:29:20.100 に答える