SYNCERのロゴ
アイキャッチ画像

background-clip - 背景の範囲

background-clipは、背景の範囲を設定するプロパティです。通常、背景は要素の枠線の境界まで描画されますが、それをパディングの境界までにしたり、コンテンツの境界までにしたりと調整できます。

概要

名前
background-clip
<box>#
<box> = border-box | padding-box | content-box
初期値
border-box
適用対象
全ての要素。
継承
しない。
パーセンテージ
N/A
メディア
visual
計算値
as specified
アニメーションの可否
N/A
仕様書
https://drafts.csswg.org/css-backgrounds-3/#the-background-clip

チュートリアル

下記のリストから値を指定できます。複数指定するにはコンマ(,)で区切って下さい。

border-box
初期値。枠線の領域。
padding-box
枠内余白の領域。
content-box
コンテンツの領域。
/* 単独のレイヤー */
background-color: red ;
background-clip: padding-box ;

/* 複数のレイヤー */
background-image: url(image1.png),url(image2.png) ;
background-clip: padding-box,border-box ;

デモ

背景の範囲がそれぞれで違っているのを確認しましょう。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div {
	background-color: red ;
	padding: 25px ;
	border: 25px dotted #000 ;
	color: #fff ;
	margin: 24px 0 ;
}

#border-box {
	background-clip: border-box ;
}

#padding-box {
	background-clip: padding-box ;
}

#content-box {
	background-clip: content-box ;
}
</style>
</head>
<body>
	<div id="border-box">border-box<br>border-box<br>border-box</div>
	<hr>
	<div id="padding-box">padding-box<br>padding-box<br>padding-box</div>
	<hr>
	<div id="content-box">content-box<br>content-box<br>content-box</div>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
5.1+ 9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月31日 (火)
コンテンツを公開しました。