コニファ・ロゴ
HOME サイトマップ 営業日カレンダー お問い合わせ

csstest：CSS「background-clip」を使って、背景画像をテキストで切り抜き

CSSの「background-clip」プロパティは、背景画像の描画領域を指定するもので、値は「border-box」、「padding-box」、「content-box」がありますが、これを「background-clip:text」とすると、画像編集ソフトのクリッピングの様に、背景画像をテキストで切り抜くことができます。対応はwebkit系（Chrome、Safari）と限られるようです。

このページは、Google ChromeやSafariでご覧下さい。

サンプル　フォントはGoogleフォント’Luckiest Guy’

Conifer
1234567890
Sample
ABCDEFGHI

サンプルのcssソース

#clip {
    width:648px;
    height:432px;
    padding:10px;
    margin:0 auto;
    background:url(img3/blend-bg2.png);
    font: normal 90pt/0.9 'Luckiest Guy', sans-serif;
    color: rgba(0,0,0,0);
    -webkit-background-clip: text;
    }

 

 

 

戻るボタン