背景画像をテキストの形で切り抜く(クリッピング)

[ ID : 8230 ]
ブロンズ
背景画像をテキストの形で切り抜く(クリッピング)
実装目安
1分

概要

CSSのbackground-clipプロパティを使用して、背景画像をテキストの形で切り抜く方法を紹介。

用途・要件

  • CSSのbackground-clipを使用して、背景画像を文字の形に切り抜く。
  • 背景画像を設定したコンテンツの上下左右中央に配置したテキストを切り抜く実装例も記載。(例2)

検証ブラウザ

  • Google Chrome(最新)
  • Safari(最新)
  • Firefox(最新)
  • Microsoft Edge(最新)

実装

このコンテンツの続きを閲覧するにはログインが必要です。 新規会員登録

この記事をシェアする

全ての記事を見る

KONOCODEのメリット 無料会員登録