CSS マスキング

CSS マスキングを使用して、要素の上に配置するマスクレイヤーを作成し、要素の一部を部分的または完全に非表示にします。

CSS mask-image プロパティ

CSSmask-imageプロパティは、マスクレイヤーイメージを指定します。

マスクレイヤーイメージは、PNGイメージ、SVGイメージ、CSS グラデーション、またはSVG<マスク>要素.

ブラウザのサポート

ノート：ほとんどのブラウザーは、CSSマスキングを部分的にしかサポートしていません。ほとんどのブラウザでは、標準プロパティに加えて-webkit-プレフィックスを使用する必要があります。

以下の表の番号は、プロパティを完全にサポートする最初のブラウザバージョンを示しています。-webkit-が後に続く数字は、プレフィックスで機能した最初のバージョンを指定します。

プロパティ
マスク画像	4.0 -ウェブキット-	79.0 -ウェブキット-	53.0	4.0 -ウェブキット-	15.0 -ウェブキット-

イメージをマスクレイヤーとして使用する

PNGまたはSVG画像をマスクレイヤーとして使用するには、url()値を使用してマスクレイヤー画像を渡します。

マスクイメージには、透明または半透明の領域が必要です。黒は完全に透明であることを示します。

使用するマスク画像(PNG画像)は次のとおりです。
W3Schools.com
これはイタリアのチンクエテッレの画像です。
Cinque Terre
ここで、イタリアのチンクエテッレからの画像のマスクレイヤーとして、マスク画像(上のPNG画像)を適用します。

例

ソースコードは次のとおりです。

.mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

自分で試してみる»

例の説明

のmask-imageプロパティは、要素のマスクレイヤーとして使用する画像を指定します。

のmask-repeatプロパティは、マスクイメージを繰り返すかどうか、またはどのように繰り返すかを指定します。のno-repeat値は、マスクイメージが繰り返されないことを示します(マスクイメージは1回だけ表示されます)。

もう一つの例

省略した場合mask-repeatプロパティを使用すると、マスクイメージがイタリアのチンクエテッレのイメージ全体に繰り返されます。

例

ソースコードは次のとおりです。

.mask1 { -webkit-mask-image: url(w3logo.png); mask-image: url(w3logo.png); }

自分で試してみる»

グラデーションをマスクレイヤーとして使用する

CSSの線形グラデーションと放射状グラデーションもマスクイメージとして使用できます。

線形勾配の例

ここでは、画像のマスクレイヤーとして線形グラデーションを使用します。この線形グラデーションは、上(黒)から下(透明)に向かっています。

例

線形グラデーションをマスクレイヤーとして使用する:

.mask1 { -webkit-mask-image: linear-gradient(black, transparent); mask-image: linear-gradient(black, transparent); }

自分で試してみる»

ここでは、画像のマスクレイヤーとしてテキストマスキングと共に線形グラデーションを使用します。

チンクエテッレは、イタリア北西部のリグーリア州にある沿岸地域です。ラ・スペツィア県の西部に位置し、モンテロッソアルマーレ、ヴェルナッツァ、コルニリア、マナローラ、リオマッジョーレの5つの村で構成されています。

例

マスクレイヤーとしてテキストマスキングと共に線形グラデーションを使用します。

.mask1 { max-width: 600px; height: 350px; overflow-y: scroll; background: url(img_5terre.jpg) no-repeat; -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(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%); mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%); }

自分で試してみる»

SVGをマスクレイヤーとして使用する

SVG<mask>要素をSVGグラフィック内で使用して、マスキング効果を作成できます。

ここでは、SVGを使用します。<mask>画像用に異なるマスクレイヤーを作成するための要素:

例

SVGマスクレイヤー(三角形として形成):

自分で試してみる»

例

SVGマスクレイヤー(スターとして形成):

自分で試してみる»

例

SVGマスクレイヤー(円として形成):

自分で試してみる»