コトダマウェブホームHTMLCSSBootsrtapWordPressプラグインphotoshopIllustratorJavaScriptjQueryその他サーチコンソールGoogleアナリティクスツールWordPressとデザインが学べるWebメディアmenuホームCSS背景画像をテキストで切り抜く方法CSS2018.04.17背景画像をテキストで切り抜く方法ここでは、こんな感じでテキストが背景画像になっているというか、背景画像をテキストで切り抜く方法について見ていきます。背景画像をテキストで切り抜く方法この背景画像がテキストになっているものをここでは「背景画像テキスト」と呼ぶことにしましょう。作り方下記の3ステップです。URL(https://cotodama.co/wp-content/uploads/2018/04/199771977.jpg);}背景画像テキストにしたいp要素などにクラスを入れて背景画像を設定します。ここでは「text_clip」というクラス名を入れました。text;を指定すると、背景画像がテキストで切り抜かれます。ここではまだテキストに色が付いているので背景画像が見えていません。transparent;}ここまで来たらあと少しです。transparent;を指定してテキストを透明にします。これでテキストの下にある画像が透けて切り抜きされたように見えるようになります。CodePen.あとは文字を大きくしたり、背景画像の大きさや位置を調整すれば完成です。