未経験からエンジニア、そして採用担当のブログ|kakureblog

未経験からエンジニアになれた経験、エンジニア転職のヒントやプログラミングのTipsを届けます🤟

コーディング

【CSS】テキストにマスク掛け。画像をテキストの形にクリッピング。(background-clip)

投稿日:2019年9月7日 更新日:

こんにちは。

日頃インプットしてイイなーっと思った小技を紹介していこうと思います。

今回は画像をテキストの形に合わせてクリッピング(切り抜く)方法を紹介したいと思います。この方法を使うことでテキスト内に背景画像を入れ込むことや、テキストの色をグラデーションで表現できる様になります。


下記画像のようなイメージです。

こんな感じです。

では説明していきます。

まずテキストを用意します。

<section class="section">
   <div class="inner">
       <p class="coloredText">colored text.</p>
   </div>
</section>


そしてベースとなるCSS(SCSS)はこちらです。

.section{
    margin: 350px auto;
    .inner{
        width: 1200px;
        margin: 0 auto;
        .coloredText{
            font-size: 60px;
            margin: 0 auto;
            color: #fff;
        }
    }
}


次に背景画像を用意します。サイズはcoverを指定します。

背景画像
.section{
    margin: 350px auto;
    .inner{
        width: 1200px;
        margin: 0 auto;
        .coloredText{
            font-size: 60px;
            margin: 0 auto;
            color: #fff;
            background-image: url(../img/text-bg.jpg);
            background-size: cover;
        }
    }
}


ここにbackground-clip: text;を入れます。
※「background-clip: text;」は対応ブラウザがChorme、Safariのみなので、記述自体は「-webkit-background-clip: text;」となります。

.section{
    margin: 350px auto;
    .inner{
        width: 1200px;
        margin: 0 auto;
        .coloredText{
            font-size: 60px;
            margin: 0 auto;
            color: #fff;
            background-image: url(../img/text-bg.jpg);
            background-size: cover;
            -webkit-background-clip: text;
        }
    }
}
テキスト


完成です。


画像ではなくグラデーションを入れたい場合は、下記のようにすれば画像とは違うパターンも作れます。

.section{
    margin: 350px auto;
    .inner{
        width: 1200px;
        margin: 0 auto;
        .coloredText{
            font-size: 60px;
            margin: 0 auto;
            color: #fff;
            background-image: linear-gradient(to right, #000, pink);
            -webkit-background-clip: text;
        }
    }
}
テキスト

このようになります。(かっこよくないですか?w)


また小技を見つけたら紹介します!
でわ!

-コーディング
-, , ,

執筆者:

関連記事

CSS

【CSS】repeating-linear-gradient 背景に格子・ストライプを表現する

コンテンツ背景に格子状のデザインやストライプのデザインを背景に引く方法をお教えします。

CSS

【CSS】 複数、子孫、子、隣接…忘れがちなセレクタをまとめました。<前編>

「*」「+」「>」「,」これらについて書きます。セレクターを自由に使える様になると、コーディングスピード、可読性、更新性がアップします。

勉強

プログラミング初心者の独学の方法、おすすめ教材

完全初心者からWebチーム内で戦えるようになった方法について書きます。

CSS

【CSS】子要素を親要素内で上下左右中央寄せさせる方法

子要素を親要素の上下左右中央に持ってくる方法を書きました。
様々な方法があるのですが、個人的には今回紹介する方法がベストではないかと思います。参考になれば幸いです。

CSS

【CSS】outlineの特徴まとめ 〜borderとの違いまで〜

outlineとborderの違いについて書きました。今まではborderしか使っていなかったのですが、outlineの特徴を知れば、コーディングでできることの幅が広がります。脱初心者を目指して。

me

Taka

学生時代にアメリカ(サンフランシスコ)とカナダ(トロント)にそれぞれ約1年間づつ住んでいました。特にサンフランシスコではシリコンバレーに訪れた際にITの素晴らしさに触れ感動しました。IT業界で働くと決心した瞬間でもありました。現在はWeb制作に携わる会社員です。