CSS - mask

概要

属性名	mask
値	<mask-layer>#
値の詳細	<mask-layer> = <mask-reference> \|\| <position> [ / <bg-size> ]? \|\| <repeat-style> \|\| <mask-origin> \|\| <mask-clip> \|\| <compositing-operator> \|\| <masking-mode>
初期値	個々のプロパティを参照
適用可能要素	すべての要素。SVG においては <defs> 要素を除くコンテナ要素、グラフィック要素、および、<use> 要素
継承	継承しない
サポート	https://caniuse.com/mdn-svg_elements_mask

説明

mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-composite, mask-mode を一括指定します。マスクの詳細は CSSマスクを参照してください。

<mask-reference>: mask-image を参照してください。
<position>: mask-position を参照してください。
<bg-size>: mask-size を参照してください。
<repeat-style>: mask-repeat を参照してください。
<mask-origin>: mask-origin を参照してください。
<mask-clip>: mask-clip を参照してください。
<compositing-operator>: mask-composite を参照してください。
<masking-mode>: mask-mode を参照してください。

使用例

CSS

#img {
  /* mask-image: url(mask.png); */
  /* mask-position: 10px 10px; */
  /* mask-size: 120px 80px; */
  /* mask-repeat: no-repeat; */
  /* mask-origin: border-box; */
  /* mask-clip: content-box; */
  /* mask-composite: add; */
  /* mask-mode: alpha; */
  mask: url(mask.png) 10px 10px / 120px 80px no-repeat border-box content-box add alpha;
}

リンク

初版：2024年12月29日、最終更新：2024年12月29日

https://www.tohoho-web.com/css/prop/mask.htm