今回は、CSSの［background-clip］を使用して、下記のように背景画像をテキストの形に切り抜く方法を紹介します。
設定は簡単です。切り抜く箇所に、背景画像と［ background-image］とテキストの色を透過指定［color: transparent;］し、切り抜く［background-clip: text;］を指定してください。
<div class="top">
<div class="clip">WEB<br> DESIGN</div>
</div>
.clip {
background-image: url(https://autoproject.nagoya/wp-content/uploads/ap-0-1.jpg);
background-clip: text;/*画像を切り抜く指定*/
-webkit-background-clip: text;/*画像の位置を決める ベンダープレフィックスもいれておきます*/
color: transparent;/*テキスト透過*/
font-size: 180px;
font-weight: bold;
line-height: 1.2;
width: 100vw;
height: 100vh;
background-repeat: no-repeat;
background-size: cover;
background-position: center;/*画像の位置を決める*/
}
.top{
background-color: black;
}オートプロジェクトでは、TEGARU（テガル）というテーマ販売サービスを行っております。
企業や飲食店など、業種ごとに特化したデザインで安価に提供していますので、予算の限られたお客様への提案にぜひご利用ください。
▶ 初めてのWebサイトに最適！テンプレートで簡単に作ることができる、各業種に特化したWordPressテーマ「TEGARU（テガル）」
株式会社オートプロジェクトでは、バックエンド全般を安心してお任せいただけます。
サーバー設定やDB管理、セキュリティ対策など幅広いニーズに対応いたします。お気軽にご相談ください。
