3

要素に背景画像を提供する場合、すべてが正常に機能します。

<div [style.background-image]="sanitizedStyleValue"></div>

しかし、要素にマスク画像を提供するにはどうすればよいでしょうか? これ：

<div [style.mask-image]="sanitizedStyleValue"></div>

動かない。また

<div [ngStyle]="{ 'mask-image': 'url( mymaskimage.svg )' }"></div>

動作しません。コンソールに警告すら表示されません。

これは DomSanitizer がマスク イメージの存在権を無視しているためですか、それともこれを達成する別の方法はありますか?

環境

マスク画像の URL の一部として使用されるアイコン名を指定できるIconComponentを作成したいと考えています。Input()もう 1 つInput()は背景色を保持します。このようにして、さまざまなアイコンをさまざまな色と組み合わせることができます。

考えられるすべてのアイコンに対して CSS クラスを作成しないようにしたいと思います。

4

2 に答える 2

2

documentationによると、 CSS マスクがクロムで機能するには、ルールの前に-webkit-

だからこれはうまくいくはずです

<div [style.-webkit-mask-image]="sanitizedStyleValue"></div>

注: W3C の推奨に従って、マスクに使用している画像は正しい CORS ヘッダーと共に返される必要があります。

ユーザー エージェントは、[HTML5] 仕様で定義されている可能性のある CORS 対応のフェッチ メソッドを、 mask-image、mask-border-source、および clip-path プロパティのすべての 、および値に対して使用する必要があります。フェッチするとき、ユーザー エージェントは「匿名」モードを使用し、リファラー ソースをスタイルシートの URL に設定し、オリジンを含むドキュメントの URL に設定する必要があります。これによりネットワーク エラーが発生した場合、結果は、値 none が指定されたかのようになります。

于 2020-05-24T10:19:46.523 に答える