マスク

指定された画像あるいは要素をマスクとして処理する。

使い方

参考:

CSS マスキング mask-image の使い方 | Web Design Leaves

CSS のみで画像のマスキング – Qiita

CSS のみでテキストにグラデーションやリフレクトをかけるテクニック | くらげだらけ

mask プロパティで画像を切り抜く方法/マスク処理 | Tech dig

mask – マスキング | プログラマカレッジ

mask-image | HTML クイックリファレンス

Clipping and Masking in CSS | CSS-Tricks

Masking Images in CSS Using the mask-image Property | DigitalOcean

mask-mode

  • alphaアルファチャンネルがマスク値として使用される。
  • luminance画像ピクセルの明度がマスク値として使用される。
  • match-sourcemask-image の指定が url() によるマスクの場合は明度がマスク値として使用され、画像の場合はアルファチャンネルがマスク値として使用される。(デフォルト)

参考:

mask-mode | MDN

mask-mode | Codrops

mask-size

  • auto自動 (デフォルト)
  • contain背景領域に収まるように拡大縮小される。
  • cover背景領域を覆うように拡大縮小される。
  • サイズ幅/高さを指定する。

参考:

mask-size | HTML クイックリファレンス

mask-size | MDN

一括指定 (mask)

参考:

mask | HTML クイックリファレンス

mask | MDN

クリッピングとの違い

  • mask-image
  • clip-path
  • clipPath 要素 (SVG)
こちらのページを参照

参考:

CSS で切り抜くあれこれ/clip-path と mask-image の違い | 長谷川満

SVG 画像を背景にして色を変更したい

.background { background-color: #7ecc78; -webkit-mask-image: url('/images/background.svg'); mask-image: url('/images/background.svg'); }
Code language: CSS (css)

参考:

How to modify the fill color of an SVG image when being served as background image? – Stack Overflow

Can I Use

Firefox 以外は、ベンダープレフィックス -webkit- を付ける必要がある。

  • mask-imageFirefox
  • -webkit-mask-imageChrome / Edge / Safari

参考:

CSS Masks | Can I Use Support Tables

mask-image | Can I Use Support Tables

mask-image: SVG Masks | Can I Use Support Tables

mask-image: Multiple Mask Images | Can I Use Support Tables

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA