【Cssで簡単にできる!】テキストで画像を切り抜く方法を紹介!

Web制作

SVG画像を使用する方法(mask-imageプロパティ使用)

こちらはIEには非対応なようです。
また主要ブラウザでもベンダープレフィックスが必要になります。(2021年08月現在)

mask-imageプロパティに関する詳細な情報はこちら

デザインのサンプル

ソースコード

.primary-3295 {
    height: 250px;
    width: 100%;

    /* 背景画像 */
    background-image: url(/design/3295/img/mv-front-page.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;

    /* 切り抜く文字 */
    mask-image: url("/design/3295/img/txt-sample.svg");
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100%;
        /* ベンダープレフィックス */
        -webkit-mask-image: url("/design/3295/img/txt-sample.svg");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center center;
        -webkit-mask-size: 100%;
}
 <div class="primary-3295"></div>

テキストを使用する方法(background-clipプロパティ使用)

こちらはIE含めて主要ブラウザに対応しているようです。

background-clipプロパティに関する詳細な情報はこちら

デザインのサンプル

サンプル

ソースコード

.secondary-3295 {
    text-align: center;
    font-size: calc(100vw / 4);
    font-weight: bold;

    /* 切り抜きスタイル */
    color: transparent;
    background-clip: text;
    /* ベンダープレフィックス */
    -webkit-background-clip: text;
}
<div class="secondary-3295">サンプル</div>

まとめ

手をつける前はJavaScriptを使った複雑な記述になるのかなと思ってましたが、
意外とシンプルな記述で作れました。

この記事がちょっとでもお役に立てれば嬉しいです。

以上、「テキストで画像を切り抜く方法を紹介!」でした。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP