コーディング

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

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

CSS

【CSS】 first-child, nth-of-type,,,覚えておきたいセレクタをまとめました。<後編>

今回はセレクタ解説の後編です。first-child,last-child,nth-of-type,,,などなど

RubyとRailsとRuby on Railsの関係は?

Rubyなの?Railsなの?Ruby on Railsなの? それぞれバラバラなの?の様にまだ整理ができてない方は是非読んで見てください。

CSS

【CSS】hoverした時に別要素にアクションをさせる方法

今回はhoverした時に別の要素にアクションをつける方法を書きました。意外に躓くところなので、一読していただければと思います。脱初心者の為の内容となっています。

プログラミングを独学で始めて3年間の成長ログ【現役フロントエンドエンジニアの振り返り】

プログラミングを独学からスタートし約3年間が過ぎたのでその成長ログを書こうと思います。

me

Taka

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