CSS - background-clip

概要

属性名 background-clip
値 <box>[, <box>]*
値の詳細 <box> = border-box | padding-box | content-box | text
初期値border-box
適用可能要素すべての要素
継承継承しない
メディアvisual
アニメーション不可
サポートhttps://caniuse.com/?search=background-clip

説明

背景画像を表示する領域を指定します。

値説明
border-boxボーダーの外側まで表示します。
padding-boxパディングの外側(ボーダーの内側)まで表示します。
content-boxコンテンツの外側(パディングの内側)まで表示します。
textテキストの部分のみ表示します。透明色の文字と組み合わせることで背景を文字の形に切り抜くことができます。標準仕様にはまだ取り入れられておらず、-webkit- が必要です。

使用例

CSS
.test {
  width: 100px;
  height: 50px;
  margin: .5rem;
  border: 10px dashed #333333;
  border: 10px solid rgba(20, 20, 20, 0.4);
  background-image: url(../image/back.gif);
  padding: 10px;
  font-size: 32pt;
  font-weight: bold;
}
.test-border-box {
  background-clip: border-box;
}
.test-padding-box {
  background-clip: padding-box;
}
.test-content-box {
  background-clip: content-box;
}
.test-text {
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
HTML
<h5>border-box</h5>
<div class="test test-border-box">ABC</div>
<h5>padding-box</h5>
<div class="test test-padding-box">ABC</div>
<h5>content-box</h5>
<div class="test test-content-box">ABC</div>
<h5>text</h5>
<div class="test test-text">ABC</div>
表示

border-box

ABC

padding-box

ABC

content-box

ABC

text

ABC

関連項目

background, background-color, background-image, background-repeat, background-attachment, background-position, background-clip, background-origin, background-size

リンク

Copyright (C) 1997-2023 杜甫々
初版：1997年7月27日、最終更新：2023年5月21日
https://www.tohoho-web.com/css/prop/background-clip.htm