このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
background-origin
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
background-origin はCSS のプロパティで、背景配置領域を境界の開始位置、境界の内部、パディングの内部から設定します。
試してみましょう
background-origin: border-box;background-repeat: no-repeat;background-origin: padding-box;background-repeat: no-repeat;background-origin: content-box;background-repeat: no-repeat;<section> <div>これは要素のコンテンツです。</div></section>#example-element { background-image: url("/shared-assets/images/examples/leopard.jpg"); color: #d73611; text-shadow: 2px 2px black; padding: 20px; border: 10px dashed #333333; font-size: 2em; font-weight: bold;}background-attachment がfixed のときはbackground-origin が無視されることに注意してください。
構文
css
/* キーワード値 */background-origin: border-box;background-origin: padding-box;background-origin: content-box;/* グローバル値 */background-origin: inherit;background-origin: initial;background-origin: revert;background-origin: revert-layer;background-origin: unset;background-origin プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。
値
border-box背景は境界ボックスからの相対位置になります。
padding-box背景はパディングボックスからの相対位置になります。デフォルト値です。
content-box背景はコンテンツボックスからの相対位置になります。
公式定義
| 初期値 | padding-box |
|---|---|
| 適用対象 | すべての要素。::first-letterおよび::first-line にも適用されます。 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 反復可能リスト |
形式文法
background-origin =
<visual-box>#
<visual-box> =
content-box|
padding-box|
border-box
例
背景画像の原点を設定
css
.example { border: 10px double; padding: 10px; background: url("image.jpg"); background-position: center left; background-origin: content-box;}css
#example2 { border: 4px solid black; padding: 10px; background: url("image.gif"); background-repeat: no-repeat; background-origin: border-box;}css
div { background-image: url("logo.jpg"), url("main-back.png"); /* 背景に 2 つの画像を適用 */ background-position: top right, 0px 0px; background-origin: content-box, padding-box;}2 つのグラデーションの使用
この例では、ボックスに太い点線の境界線が付いています。最初のグラデーションでは、padding-box をbackground-origin として使用しているため、背景は境界線の内側に表示されます。2 つ目のグラデーションは、content-boxを使用しているため、コンテンツの後ろにのみ表示されます。
css
.box { margin: 10px 0; color: white; background: linear-gradient( 90deg, rgb(131 58 180 / 100%) 0%, rgb(253 29 29 / 60%) 60%, rgb(252 176 69 / 100%) 100% ), radial-gradient(circle, white 0%, black 28%); border: 20px dashed black; padding: 20px; width: 400px; background-origin: padding-box, content-box; background-repeat: no-repeat;}html
<div>Hello!</div>仕様書
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-origin |