CSSマスク画像プロパティ
例
画像のマスクレイヤーを作成します。
.mask1 {
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 70%;
mask-size: 70%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
このmask-image
プロパティは、要素のマスクレイヤーとして使用される画像を指定します。
ヒント: CSSの線形および放射状のグラデーションは、マスク画像としても使用できます。
デフォルト値: | なし |
---|---|
遺伝性の: | いいえ |
アニメート可能: | 番号。アニメート可能について読む |
バージョン: | CSS3 |
JavaScript構文: | オブジェクト.style.maskImage = "url(star.svg)" |
ブラウザのサポート
表の数字は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。
数字の後に-webkit-が続く場合は、プレフィックスを使用して機能した最初のバージョンを指定します。
Property | |||||
---|---|---|---|---|---|
mask-image | 4.0 -webkit- | 79.0 -webkit- | 53.0 | 4.0 -webkit- | 15.0 -webkit- |
CSS構文
mask-image: none|image|url|initial|inherit;
プロパティ値
Value | Description |
---|---|
none | This is default |
image | An image to use as the mask layer |
url | An url reference to an image or an SVG <mask> element |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
その他の例
例
線形グラデーションと放射状グラデーションのある画像に異なるマスクレイヤーを作成します。
.mask1 {
-webkit-mask-image: linear-gradient(black, transparent);
mask-image: linear-gradient(black,
transparent);
}
.mask2 {
-webkit-mask-image:
radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
mask-image: radial-gradient(circle, black 50%, rgba(0, 0, 0, 0.5) 50%);
}
.mask3 {
-webkit-mask-image: radial-gradient(black 50%, rgba(0,
0, 0, 0.5) 50%);
mask-image: radial-gradient(black 50%, rgba(0, 0,
0, 0.5));
}
例
SVG <mask>要素を使用して、画像のマスクレイヤーを作成します。
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="100,10 40,198 190,78 10,78
160,198"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="img_5terre.jpg"
mask="url(#svgmask1)"></image>
</svg>
例
SVG <mask>要素を使用して、画像のマスクレイヤーを作成します。
<svg width="600" height="400">
<mask id="svgmask1">
<circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
<circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
<circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="img_5terre.jpg" mask="url(#svgmask1)"></image>
</svg>
関連ページ
CSSリファレンス:mask-modeプロパティ
CSSリファレンス:mask-originプロパティ
CSSリファレンス:mask-positionプロパティ
CSSリファレンス:mask-repeatプロパティ
CSSリファレンス:mask-sizeプロパティ
CSSチュートリアル:CSSマスキング