|
maskプロパティを使用することで画像にマスクを指定することができます。
マスクのプロパティは以下の通り。
| 属性 |
説明 |
| mask-image |
マスクレイヤーの画像やグラデーションを指定する |
| mask-mode |
マスク画像をアルファマスクかルミナンスマスクに指定する |
| mask-repeat |
マスク画像の繰り返し方法を指定する |
| mask-position |
マスク画像の位置を指定する |
| mask-clip |
マスクの範囲を指定する |
| mask-origin |
マスクの基準位置を指定する |
| mask-size |
マスク画像の大きさを指定する |
| mask-composite |
複数のマスク画像の合成方法を指定する |
| mask |
マスク関連のプロパティをまとめて指定する |
【ブラウザ表示】
以下の例ではmask-imageで星型のイラストにグラデーションのマスクをかけています。
開始色は白色20％で、終了色は30％の位置で透明に設定しています。
👇
ソース
<img src="./image/star.png" class="sample19" alt="星">
外部ファイル
img.sample19{mask-image:radial-gradient(white 20%, transparent 30%);}
<body>～</body>に直接記入する場合
<img src="./image/star.png" style="mask-image:radial-gradient(white 20%, transparent 30%);" alt="星">
■ マスクの大きさを指定する
以下の例ではグラデーションマスクがかかった横幅50px、高さ50pxの星形が表示されています。
【ブラウザ表示】
外部ファイル
img.sample20{
mask-image:radial-gradient(white 20%, transparent 30%);
mask-size:50px 50px;
}
<body>～</body>に直接記入する場合
<img src="./image/star.png" style="mask-image:radial-gradient(white 20%, transparent 30%); mask-size:50px 50px;" alt="星">
■ マスクの位置を指定する
mask-positionプロパティでマスクの位置を指定します。
以下の例では一番下から上へ 100pxの位置, 一番右から左へ 80pxの位置でマスクをかけています。
【ブラウザ表示】
外部ファイル
img.sample21{
mask-image:radial-gradient(white 20%, transparent 30%);
mask-position:bottom 100px right 80px;
}
<body>～</body>に直接記入する場合
<img src="./image/star.png" style="mask-image:radial-gradient(white 20%, transparent 30%); mask-position:bottom 100px right 80px;" alt="星">
■ その他の項目
・
画像に枠線を入れる
・
画像の周りに余白を入れる
・
画像の横に文字を回り込ませる
・
画像に並ぶ文字の位置を指定する
・
画像の横幅、高さを指定する
・
画像を切り抜く
スタイルシート一覧のページに戻る
|
