特殊な形で画像を切り抜きたい時単純に1枚画像を用意することもできますが、例えば切り抜きたい画像が動的に変わる場合などはCSSで画像を自由な形で切りぬくことができるようにしておくと便利です。
今回はCSSで画像をマスクする方法をご紹介します。
mask-image プロパティ
mask-imageプロパティを使うと、指定した画像の形で切り抜くことができます。
基本的にマスクレイヤーとして使用する画像はSVGなどのパスデータで用意するとサイズの変更もきれいにできます。
HTML
|
1 2 3 |
<figure class="mskImg"> <img src="img/nekochan.jpg" alt="ベース画像"/> </figure> |
CSS
|
1 2 3 4 5 6 7 8 9 10 |
.mskImg { mask-image: url("img/star.svg");/*マスクレイヤーとして使用する画像*/ mask-repeat: no-repeat; mask-position: 3% 0; mask-size: auto 100%; -webkit-mask-image: url("img/star.svg"); -webkit-mask-repeat: no-repeat; -webkit-mask-position: 3% 0; -webkit-mask-size: auto 100%; } |
接頭辞『-webkit』を付けたものも記述をしていないと、chromeやsafariでうまく動作しないのでご注意ください。
| プロパティ | 詳細 |
|---|---|
mask-image |
マスクレイヤーとして使用する画像を指定する。 |
mask-repeat |
マスクレイヤーとして使用する画像をリピートして使うか。 |
mask-position |
マスクレイヤーとして使用する画像の場所指定。（x,y）の形で指定する。 |
mask-size |
マスクレイヤーとして使用する画像のサイズ指定。（横幅,立幅）の形で指定する。 |
clip-path プロパティ
clip-pathプロパティを使用すると、正円・楕円・長方形・多角形などあまり複雑ではないで形切り抜くことができます。画像は特に用意しなくてもいいところが便利です。
HTML
|
1 2 3 4 |
<img src="img/nekochan02.jpg" alt="ベース画像（正円）" class="clipImg01"/> <img src="img/nekochan02.jpg" alt="ベース画像（楕円）" class="clipImg02"/> <img src="img/nekochan02.jpg" alt="ベース画像（長方形）" class="clipImg03"/> <img src="img/nekochan02.jpg" alt="ベース画像（多角形）" class="clipImg04"/> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/*正円*/ .clipImg01 { clip-path: circle(120px at center); } /*楕円*/ .clipImg02 { clip-path: ellipse(50% 50% at center); } /*長方形*/ .clipImg03 { clip-path: inset(20px 20px 20px 20px round 15px); } /*多角形*/ .clipImg04 { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } |
| clip-pathの値 | 詳細 |
|---|---|
circle() |
正円の設定ができます。最初のサイズ指定は半径です。atの後に切り抜きの場所を%やcenterなどで指定できます。 |
ellipse() |
楕円の設定ができます。こちらも最初のサイズ指定は半径です。atの後に切り抜きの場所を%やcenterなどで指定できます。 |
inset() |
長方形の設定ができます。値は（上,右,下,左）でそれぞれの端からの距離を設定できます。roundの後に角丸の値の設定ができます。 | polygon() |
多角形の設定ができます。頂点の位置を決めて、そこから何%動かして…のような設定ができるのですが感覚でやるのはだいぶ難しいのでClippyのようなサイトを使うのが便利です。 |
background-clip
background-clipプロパティを使用すると、例えば背景に置いた画像をテキストなどで切り抜くことができます。HTML
|
1 2 3 |
<div class="bgClip"> <p>CAT</p> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 |
.bgClip { background-image: url("img/nekochan03.jpg"); background-clip: text; -webkit-background-clip: text; color: transparent; } .bgClip p{ font-size: 120px; font-weight: 900; line-height: 1; } |
接頭辞『-webkit』を付けたものも記述をしていないと、chromeやsafariでうまく動作しないのでご注意ください。
| background-clipの値 | 詳細 |
|---|---|
border-box |
背景を境界の外側の辺まで拡張できます。 |
padding-box |
背景をパディングの外側の辺まで拡張して、切り抜くことができます。 境界の下には背景は表示されません。 |
content-box |
背景をコンテンツボックスの中で切り取って表示します。 | text/code> |
背景を前景のテキストの中で切り取って表示します。 |
各プロパティ、使いこなせればWebサイトでの表現の幅が広がりそうですね。
