CSSで画像にくり抜きのマスクをかける便利なスニペット3選

マスクのイラスト

このCSSのプロパティを使うまでは、画像にマスクをかける時、IllustratorやPhotoshopで画像を都度作成する必要がありましたが、この記事で解説するCSSのプロパティで、粗方の事はCSSだけで実現できるようになり、本当に便利になりました。

また、応用することで画像だけでなく、動画やアニメーションと絡ませて使うことができるので、表現の幅も広がったりと、デザインや表現の引き出しも増えます。

この記事は、そんな画像にくり抜きのマスクをかける方法について

  • 背景画像をテキストの形にくり抜きする方法。
  • 背景画像を図形の形にくり抜きする方法。
  • 背景画像を画像の形にくり抜きする方法。

の内容です。

よく使う3つのCSSプロパティについて解説していきますので、ご覧ください。

かかかず
かかかず

サンプルと併せてご覧ください。

背景画像をテキストの形にくり抜き

背景画像にテキストの形でマスクをかける方法です。テキストは p タグなどで記述したものでOKで、以下は p タグにclassをつけた場合のサンプルです。

背景画像にテキストのマスクをかけない形

THE TEXT

背景画像にテキストでマスクをかけた形

THE TEXT

テキストのマスクをかけた時のHTMLとCSSのコード一式

文字のマスクをかけるには、CSSのbackground-cliptextにして、文字色を透明に設定することで可能です。この2つは、以下の記述です。

CSS
background-clip: text;
-webkit-background-clip: text;
color: transparent;

background-clipは、対応ブラウザに合わせてベンダープレフィックスをつけてあげればOKです。

コードを表示する

HTML

<p class="testbgtxt">THE TEXT<p>

CSS

.testbgtxt {
    display: block;
    font-size: 6.5em;
    font-weight: bold;
    background: url(https://dubdesign.net/wp-content/uploads/2021/07/textmask001.jpg) no-repeat center center/cover;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    letter-spacing: -0.1rem;
    line-height: 6rem;
    padding: 15px 0 10px;
}

背景画像を図形の形にくり抜き

背景画像に色んな形の図形でマスクをかける方法です。図形の境界線もガビガビしないので、これは結構重宝します。

背景画像に図形のマスクをかけない

背景画像に図形のマスクをかけた形

図形のマスクをかけた時のHTMLとCSSのコード一式

図形はclip-path のプロパティを使っていろんな形を作ることができ、一例で言えば以下の通りです。

CSS
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);  /*三角形*/
clip-path: circle(50% at 50% 50%);  /*丸*/

これ以外にも、六角形や矢印などいろんな図形でマスクを作ることができます。色んな図形は、下記ジェネレーターを使えば任意の形のコードを自動で生成してくれるので、コードを出力して使うようにしましょう。

外部リンク CSS clip-path maker

コードを表示する

HTML

<div class="box_maskon"></div>

CSS

.box_maskon {
    background: url(https://dubdesign.net/wp-content/uploads/2021/07/textmask003.jpg) no-repeat;
    height: 300px;
    background-size: cover;
    clip-path: polygon(0 0, 0% 100%, 100% 100%);
}

背景画像を画像の形にくり抜き

くり抜きをする画像は、pngやgifの背景透過の画像でくり抜きをすることが可能です。サンプルでは、svgファイルでマスクをかけています。

背景画像に画像のマスクをかけない

背景画像に画像でマスクをかけた形

画像のマスクをかけた時のHTMLとCSSのコード一式

画像でマスクをかける場合、CSSのbackground-imageにプロパティが似ているので、覚えやすいです。

主に以下の4つのプロパティで、マスクをかけます。

CSS
mask-image: XXX ; /*マスクの形にする画像の参照 */
mask-size: XXX ; /*マスクの大きさ */
mask-repeat: XXX ; /*マスク画像を繰り返すかどうか */
mask-position: XXX ; /*マスクの位置 */

注意点としては、ベンダープレフィックスが必要なので、必ず併記するようにしましょう。

コードを表示する

HTML

<div class="bgmask_on"></div>

CSS

.bgmask_on {
    background: URL(https://dubdesign.net/wp-content/uploads/2021/07/textmask002.jpg) no-repeat bottom;
    background-size: cover;
    height: 300px;
    image: url(https://dubdesign.net/wp-content/uploads/2021/07/circleicon-1.svg);
    -webkit-mask-image: url(https://dubdesign.net/wp-content/uploads/2021/07/circleicon-1.svg);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

さいごに

このようにして、IllustratorやPhotoshopを使わずに表現できるのは便利で、内容の更新の際にも時間の節約ができるので、オススメです。

是非、コーディングする際に使ってみてください。

参考サイト

参考background-clipMDN Web Docs
カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影