CSS3

プロパティ

mask-image

→●、mdn

マスク画像。

このプロパティは、要素上の マスク層画像 を設定する。

<mask-reference>

＝none
| <image>
| <mask-source>

<image>

＝<url>
| <gradient>

<gradient> ○

<IMG style=" mask-image:linear-gradient(#fff,#000); " src="Com/Touka.gif">

<mask-source>

＝<url>

<url> ○

［mask 要素／CSS 画像］†への URL 参照（例えば url(commonmasks.svg#mask)）。【†どちらになるかは、多義的な画像 URL を見よ。】

<DIV style="
 mask-image:image(url(Com/SVG.svg), skyblue);
 width:100px; height:100px;
 border:1px solid red;
">DIV要素</DIV>

<DIV style="background-color: #8cffa0;
 -webkit-mask-image: url(Com/SVG.svg);
 mask-image: url(Com/SVG.svg);
 width:100px; height:100px;
 border:1px solid red;
">DIV要素<BR>です</DIV>

none

透明な黒の画像層として数えられるようになる。

算出値が none 以外になる場合 ― opacity の値が 1 未満のときと同じ仕方で ― 積層文脈を作成させる。

次に該当するマスク参照であっても、透明な黒の画像層として数えられる：

空画像である（横幅または縦幅が 0 ）／

ダウンロードに失敗した／

mask 要素への参照でない／

存在しない／

表示できない（例：サポートされる画像形式でない）

マスク層画像を処理する方法については、マスクの処理法を見よ。

注記： <mask-reference> が成すリスト内の値 none は、mask-composite に指定される 利用される組成演算子に依存して、マスク法演算に波及し得る。

注記： <mask-source> は、マスク層として数えられ、繰り返し可能な <mask-reference> リスト内で <image> や更なる <mask-source> リストアイテムと組み合せれる。

注記： 要素は、mask-border-source でもマスクできる。そのプロパティと mask-image との相互作用については、mask-border-source を見よ。

body { mask-image: linear-gradient(black 0%, transparent 100%) }
p { mask-image: none }
div { mask-image: url(resources.svg#mask2) }

テスト