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

リンク

初版：1997年7月27日、最終更新：2023年5月21日

https://www.tohoho-web.com/css/prop/background-clip.htm

CSS - background-clip

概要

説明

使用例

border-box

padding-box

content-box

text

関連項目

リンク