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

2021年7月12日 3分

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

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

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

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

の内容です。

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

かかかず

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

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

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

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

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

THE TEXT

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

THE TEXT

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

文字のマスクをかけるには、CSSのbackground-clipをtextにして、文字色を透明に設定することで可能です。この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;
}