CSS マスク
- 前のページ CSS object-position
- 次のページ CSS ボタン
CSSマスクを使用すると、マスクレイヤーを作成し、要素に配置して、要素の一部または全部を部分または完全に隠すことができます。
mask-image 属性
CSS 例解 属性がマスクレイヤー画像を指定します。
マスクレイヤー画像はPNG画像、SVG画像、CSS 渐变 または SVG <mask> 要素。
ブラウザのサポート
以下のテーブルの数字は、その属性が完全にサポートされる最初のブラウザのバージョンを示します。
含まれています -webkit- 前缀の数字は、その前缀がサポートされる最初のバージョンを示します。
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 120 | 120 | 53 | 15.4 | 15 -webkit- |
画像を使用してマスクレイヤーを設定します
PNGやSVG画像をマスクレイヤーとして使用するには、以下を使用してください： url() 値をマスクレイヤー画像に伝達します。
マスク画像は透明または半透明なエリアを持っている必要があります。黒色は完全に透明を示します。
これは私たちが使用するマスク画像（PNG画像）です：
これはイタリアの五漁村からの画像です：
現在、私たちはマスク画像（上のPNG画像）をイタリアの五漁村画像のマスクレイヤーとして適用します：
例
以下はソースコードです：
.mask1 {
-webkit-mask-image: url(w3.png);
mask-image: url(w3logo.png);
mask-repeat: no-repeat;
}
例子解释
例解 mask-image
mask-repeat 属性は、マスク画像が要素のマスクレイヤーとして使用される画像を指定します。no-repeat値は、マスク画像が重複しないことを示します（マスク画像は一度だけ表示されます）。
別の例
もし省略すると 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);
}
ここでは、線形グラディエントとテキストマスクを使用して画像のマスクレイヤーとして使用しています：
武漢は楚文化の重要な発祥地であり、春秋戦国時代から中国南方的軍事・商業の重要な都市であり、元代には湖広行省の省庁が置かれ、明・清時代には「楚中第一繁盛地」と「天下四聚」の一つとして称えられました。清末には漢口の開港と洋務運動が武漢の近代化の進展を開き、近現代中国の重要な経済中心地となりました。武漢は辛亥革命の初頭地であり、近代史上数度にわたって全国の政治・軍事・文化の中心地となりました。
武漢は楚文化の重要な発祥地であり、春秋戦国時代から中国南方的軍事・商業の重要な都市であり、元代には湖広行省の省庁が置かれ、明・清時代には「楚中第一繁盛地」と「天下四聚」の一つとして称えられました。清末には漢口の開港と洋務運動が武漢の近代化の進展を開き、近現代中国の重要な経済中心地となりました。武漢は辛亥革命の初頭地であり、近代史上数度にわたって全国の政治・軍事・文化の中心地となりました。
武漢は楚文化の重要な発祥地であり、春秋戦国時代から中国南方的軍事・商業の重要な都市であり、元代には湖広行省の省庁が置かれ、明・清時代には「楚中第一繁盛地」と「天下四聚」の一つとして称えられました。清末には漢口の開港と洋務運動が武漢の近代化の進展を開き、近現代中国の重要な経済中心地となりました。武漢は辛亥革命の初頭地であり、近代史上数度にわたって全国の政治・軍事・文化の中心地となりました。
例
線形グラディエントとテキストマスクを使用してマスクレイヤー:
.mask1 {
max-width: 600px;
height: 350px;
overflow-y: scroll;
background: url(wuhan.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マスク要素はSVGグラフィック内で使用され、マスク効果を作成できます。
ここでは、SVGマスク要素を使用して画像に異なるマスクレイヤーを作成しています：
例
三角形のSVGマスクレイヤー：
<svg width="600" height="400">
<mask id="svgmask1">
<polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
</mask>
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>
例
星形のSVGマスクレイヤー：
<svg width="600" height="400">
<mask id="svgmask2">
<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="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>
例
円形のSVGマスクレイヤー：
<svg width="600" height="400">
<mask id="svgmask3">
<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="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>
- 前のページ CSS object-position
- 次のページ CSS ボタン
