1. 序論
`~CSS~box~model$ `CSS-BOX-3$r に則って描画される各 要素は、 まったく表示されないか, 1 個以上の矩形な~boxとして整形される。 各~boxには、[ 矩形な`内容~区画$, 内容を囲う`~padding$の帯, ~paddingを囲う`~border$, ~borderの外側にある`~margin$ ]がある。 (~marginは実際には負にもなり得る 【すなわち,~margin辺は~border辺の内側に入り得る】 が,背景や~borderには波及しない。) ◎ When elements are rendered according to the CSS box model [CSS-BOX-3], each element is either not displayed at all, or formatted as one or more rectangular boxes. Each box has a rectangular content area, a band of padding around the content, a border around the padding, and a margin outside the border. (The margin may actually be negative, but margins have no influence on the background and border.)
内容, ~padding, ~border, ~marginを成す各~区画を示す,~boxの図式 ◎ Diagram of a typical box, showing the content, padding, border and margin areas
この~moduleの各種~propは、[ `内容~区画$, `~padding区画$, `~border区画$ ]の背景について処する。 ◎ The properties of this module deal with the background of the content, padding, and border areas.
要素を複数個の`~box断片$に分断する必要があるときは、 `box-decoration-break$p が, ~borderと背景を断片たちに分割する方法を定義する (要素は、 いくつかの[ 行l/~col/~page ]にわたり,複数個の断片に分断され得る)。 ◎ If an element is broken into multiple box fragments, box-decoration-break defines how the borders and background are divided over the various fragments. (An element can result in more than one fragment if it is broken at the end of a line, at the end of a column or at the end of a page; and continued in the next line, column or page.)
[ 背景, ~border, 影 ]の相対的な積層~順序は、 この~moduleにて与えられる。 これらの層と他の描画~内容との相互作用については、 `CSS2$r `§ 積層~文脈の詳しい記述$を見よ。 ◎ The relative stacking order of backgrounds, borders, and shadows is given in this module. For how these layers interact with other rendered content, see Appendix E “Elaborate description of Stacking Contexts” in [CSS2].
1.1. ~module間の相互作用
この仕様は、 `CSS3BG$r を成す背景に関係する各部を拡張する: ◎ This specification extends the parts related to backgrounds of CSS Backgrounds and Borders Module Level 3 [CSS3BG].
- 追加された各種[ `background-repeat-*^p, `background-position-*^p ]下位prop用の仕様を供する。 ◎ It provides specifications for the added background-repeat-* and `background-position-*' longhands,\
- 新たな~propとして `background-tbd$p ~propを追加する — それは、 一連の背景~層を色を除外して定義することを許容する。 ◎ a new background-tbd property that allows to define the background layers excluding the color,\
- `background-clip$p に 2 個の新たな値を追加する。 ◎ and adds two new values to background-clip.
この~moduleにおけるすべての~propは、[ `first-letter$pe, `first-line$pe ]`疑似要素$にも適用される。 ◎ All properties in this module apply to the ::first-letter and ::first-line pseudo-elements.
1.2. 値~定義
【 この節の他の内容は、 `~CSS日本語訳 共通~page@~CSScommon#values$ に移譲。 】
…これらの値~型の定義は、 他の~CSS~moduleとの組合nで拡張され得る。 例えば, `CSS-IMAGES-3$r と組合せることで、 `background-image$p や `border-image$p の値として,~CSS~gradientを利用することも許容される。 ◎ … Combination with other CSS modules may expand the definitions of these value types. For example, combining with CSS Images allows for using CSS gradients as background-image or border-image values. [CSS-IMAGES-3]
【この訳に特有な表記規約】
“`example-property-*^p” や “`example-*-property^p” などの `*^c の入った表記は、[ 略式~prop `example-property^p の下位~propたち ]の総称を表す。
◎表記記号2. 背景の定義-法
各~boxには、 背景~層がある。 それは、 全部的に透明(既定)になるか,色や画像たちで埋められる。 各種 `background-*$p ~propは、 利用する[ 色( `background-color$p )や画像たち( `background-image$p ) ]および,それらをどう[ ~sizeする, 位置する, 敷詰める, 等々 ]かを指定する。 ◎ Each box has a background layer that may be fully transparent (the default), or filled with a color and/or one or more images. The background properties specify what color (background-color) and images (background-image) to use, and how they are sized, positioned, tiled, etc.
これらの `background-*$p ~propは,継承されないが、 `background-color$p の初期~値が `transparent$v なので,親~boxの背景は既定では~~透過することになる。 ◎ The background properties are not inherited, but the parent box’s background will shine through by default because of the initial transparent value on background-color.
2.1. 下塗り色: `background-color^p ~prop
この~propは、 ~boxの `背景~色@ を設定する。 この色は、 どの背景~画像よりも背後に描かれる。 ◎ This property sets the background color of a box. This color is drawn behind any background images.
◎ Example:
h1 { background-color: #F00 } /*
背景を赤色に設定する。
◎
Sets background to red.
*/
`背景~色$の塗ng区画は、 `background-clip$p の[ 最も背後にある`背景~画像~層$に対応する`層~値$ ]に則って,外側が切取られる。 ◎ The background color is clipped according to the background-clip value associated with the bottom-most background image layer.
2.2. 画像~source: `background-image^p ~prop
この~propは、 要素の `背景~画像@ たちを指定する。 最初の`層~値$による画像が(利用者から見て)最も手前に描かれ、 後続な層~値による各~画像は,先行する層~値による画像の背後に描かれる。 ◎ This property specifies the background image(s) of an element. Images are drawn with the first specified one on top (closest to the user) and each subsequent image behind the previous one.\
この~prop用の`層~値$の構文は: ◎ The property’s value is given as a comma-separated list of <bg-image> values where
`bg-image@t = `image$t | `none$v
`bg-image$t が次のいずれかに該当する場合でも、 1 個の`背景~画像~層$として数えられるが,何も描かない:
- 値 `none@v が指定された場合
- `image$t が画像として機能しない場合 — 次に挙げる場合など ⇒# 空である(横幅または縦幅が 0 )/ ~downloadに失敗した / 表示できない(例:~supportされない形式である)
[ `background-image$p と他の `background-*$p ]~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 3 Layering Multiple Background Images for how background-image interacts with other comma-separated background properties to form each background image layer.
作者は,背景~画像を設定するときは、[ 画像が可用でないときでも, ~text色との~contrastは保全される ]よう, `background-color$p も指定するべきである。 ◎ When setting a background image, authors should also specify a background-color that will preserve contrast with the text for when the image is unavailable.
~accessibilityの理由から、 作者は,重要な情報を伝達する手法として背景~画像のみに頼るべきでない。 `~Web内容を~access可能にするための指針 F3@~TR/2008/NOTE-WCAG20-TECHS-20081211/F3$ `WCAG20$r 【`日本語訳@https://waic.jp/docs/NOTE-WCAG20-TECHS-20120103/F3.html$】 を見よ。 非~graphicな呈示の下では、 画像は~accessし得ない。 高~contrast表示~modeの下では、 背景~画像の表示が特定的にオフにされることもある。 ◎ For accessibility reasons, authors should not use background images as the sole method of conveying important information. See Web Content Accessibility Guideline F3 [WCAG20]. Images are not accessible in non-graphical presentations, and background images specifically might be turned off in high-contrast display modes.
注記: ~CSSにおいては、 `content$p ~propにより,前景~画像を~styleとして供せる。 意味論的に重要な前景~画像は、 文書~markup (例:~HTMLの `img^e ~tag) を通して供するべきである。 ◎ Note: Stylistic foreground images can be provided in CSS with the content property. Semantically-important foreground images should be provided in the document markup, e.g. with the <img> tag in HTML.
注記: `媒体~素片~識別子@~TR/media-frags/#naming-space$を利用すれば、 画像を成すある部位に限って表示できる。 `CSS-IMAGES-3$r が[ 画像~形式~用の~fallback構文を供する/ 画像~表示~用に追加的な制御を含める ]ことになる。 ◎ Note: Media fragments can be used to display a portion of an image. The CSS Images module will provide fallback syntax for image formats and include additional controls for image display.
背景~画像を指定するいくつかの例: ◎ Some examples specifying background images:
html { background-image: url("marble.svg") }
p { background-image: none }
div { background-image: url(tl.png), url(tr.png) }
main { background-image: radial-gradient(at bottom right, transparent, white); }
実装は、 可視でない画像 (例:全部的に不透明な他の画像の背後にあるもの) を[ ~downloadしない/描かない ]よう最適化してもよい。 ◎ Implementations may optimize by not downloading and drawing images that are not visible (e.g., because they are behind other, fully opaque images).
2.3. 画像の敷詰め法:各種 `background-repeat-*^p ~prop
`repetition@t = `repeat$v | `space$v | `round$v | `no-repeat$v
これらの~propは、 `背景~画像$を[ `~sizeされ@#background-size$, `位置され@#background-position$た後 ]において[ 敷詰めるかどうか, どう敷詰めるか ]を指定する。 ◎ These properties specify whether and how background images are tiled along one axis after they have been sized and positioned.
- `repeat@v
- 当の画像は、 所与の方向において,`背景~塗ng区画$を覆い尽くすまで必要なだけ繰返される。 ◎ The image is repeated in the given direction as often as needed to cover the background painting area.
- `space@v
- 当の画像は、 所与の方向において,`背景~位置決め区画$の中に収まる限り繰返された上で、 最初と最後の画像が[ 切取られずに,当の区画の両端に接する ]よう,均等に~~間隔が~~空けられる。 `背景~塗ng区画$が`背景~位置決め区画$より大きい場合、 `背景~塗ng区画$を埋めるまで~patternが繰返されることになる。 `background-position$p の対応する`層~値$は、 当の方向については,無視される — ただし,当の方向において画像 2 個分に足る空間がない場合、 画像は 1 個だけ配置され, `background-position$p が当の方向における画像の位置を決定する。 ◎ The image is repeated in the given direction as often as will fit within the background positioning area without being clipped and then the repeated images are spaced out to fill the area. The first and last images touch the edges of the area. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area. The value of background-position for this direction is ignored, unless there is not enough space for two copies of the image in this direction, in which case only one image is placed and background-position determines its position in this direction.
- `round@v
- 当の画像は、 所与の方向において,`背景~位置決め区画$に収まる限り できるだけ多く繰返されるが、 整数個で埋尽くせない場合は,そうなるよう拡縮し直される。 `background-size$p に示されている公式を見よ。 `背景~塗ng区画$が`背景~位置決め区画$より大きい場合、 `背景~塗ng区画$を埋尽くすまで~patternが繰返されることになる。 ◎ The image is repeated in the given direction as often as will fit within the background positioning area. If it doesn’t fit a whole number of times, it is rescaled so that it does. See the formula under background-size. If the background painting area is larger than the background positioning area, then the pattern repeats to fill the background painting area.
- `no-repeat@v
- 当の画像は、 所与の方向において 1 回だけ配置され,繰返されない。 ◎ The image is placed once and not repeated in the given direction.
【算出d値において】どちらかの軸に `no-repeat$v が設定された場合を除き, `背景~塗ng区画$全体が敷詰められることになる — 縦または横に 1 本だけ帯状に連なるのではなく。 ◎ Unless one of the axes is set to no-repeat, the whole background painting area will be tiled, i.e., not just one vertical strip and one horizontal strip.
body {
background: white url("pendant.png");
background-repeat-y: repeat;
background-position: center;
}
中央に寄せられた背景~画像は、 ~borderの上から下にかけて,~padding区画と内容~区画を貫くように繰返される。 ◎ A centered background image, with copies repeated up and down the border, padding and content areas.
[ `background-repeat-x$p / `background-repeat-y$p / `background-repeat-block$p / `background-repeat-inline$p ]~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See the section § 3 Layering Multiple Background Images for how background-repeat-x, background-repeat-y, background-repeat-block, and background-repeat-inline interact with other comma-separated background properties to form each background image layer.
2.4. 画像の敷詰め法~略式: `background-repeat^p ~prop
この略式は、[ `background-repeat-x$p, `background-repeat-y$p ]下位prop用の値を設定する。 ◎ This shorthand sets the values for the background-repeat-x and background-repeat-y longhand properties.
`repeat-style@t
= `repeat-x$v
| `repeat-y$v
| `repeat-block$v
| `repeat-inline$v
| `repetition$t{1,2}
`repeat-style$t 値が 1 個の~keywordのみからなる場合、 次の表tの 2 列目に与える値に算出される: ◎ Single values for <repeat-style> have the following meanings:
| 指定d値 | 算出d値 |
|---|---|
| `repeat-x@v | `repeat no-repeat^v |
| `repeat-y@v | `no-repeat repeat^v |
| `repeat-block@v |
当の~boxの`塊-軸$に応じて ⇒# 横方向ならば `repeat no-repeat^v / 縦方向ならば `no-repeat repeat^v |
| `repeat-inline@v |
当の~boxの`行内-軸$に応じて ⇒# 横方向ならば `repeat no-repeat^v / 縦方向ならば `no-repeat repeat^v |
| `repeat$v | `repeat repeat^v |
| `space$v | `space space^v |
| `round$v | `round round^v |
| `no-repeat$v | `no-repeat no-repeat^v |
`repeat-style$t 値が 2 個の~keywordからなる場合、 順に[ 横, 縦 ]方向~用の値を与える。 ◎ If a <repeat-style> value has two keywords, the first one is for the horizontal direction, the second for the vertical one.
body {
background-image: url(dot.png) white;
background-repeat: space;
}
背景が丸印で敷詰められた要素 ◎ Image of an element with a dotted background
[ `background-repeat$p と他の `background-*$p ]~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See the section § 3 Layering Multiple Background Images for how background-repeat interacts with other comma-separated background properties to form each background image layer.
`background-repeat^p 用の値として `extend^v を`追加する@https://lists.w3.org/Archives/Public/www-style/2011Sep/0331.html$べきか? ◎ Should a 'background-repeat: extend' be added?
2.5. 画像の固着-法: `background-attachment^p ~prop
この~propは、 `背景~画像$が指定された場合に,それが次のいずれになるかを指定する:
- `表示域$に固定される( `fixed$v )
- ~boxと伴に~scrollする( `scroll$v )
- ~boxの内容と伴に~scrollする( `local$v )
この~prop用の`層~値$の構文は: ◎ The property’s value is given as a comma-separated list of <attachment> keywords where
`attachment@t = `scroll$v | `fixed$v | `local$v
- `fixed@v
- `背景~画像$は`表示域$に固定される。 (表示域が無い)`~paged媒体$においては、 `~page~box$に固定され,したがって各~pageごとに再現される。 ◎ The background is fixed with regard to the viewport. In paged media where there is no viewport, a fixed background is fixed with respect to the page box and therefore replicated on every page.
- 注記: `表示域$は各~viewごとに 1 個に限られることに注意。 ~boxが[ `~scroll容器$であった【/`~scroll容器$の中にあった】 ]としても、 `fixed$v による背景は,[ 【~boxの内容/】~box ]と伴に移動することはない。 ◎ Note: There is only one viewport per view. Even if an box is a scroll container, a fixed background doesn’t move with the box.
- `local@v
- `背景~画像$は~boxの内容に固定される。 ~boxが~scroll用の仕組みを備えている【`~scroll容器$である】ならば、 背景は,~boxの内容と伴に~scrollする。 また,`背景~塗ng区画$と`背景~位置決め区画$は、 それらの枠を成す`~border区画$ではなく, ~boxの`~scroll可能な~overflow区画$に相対的になる。 `~scroll可能な~overflow区画$は`~border区画$を含まないので、 `~scroll容器$用には, `background-clip$p に指定された値 `border-box^v を `padding-box^v と同じに扱ってもヨイ。 ◎ The background is fixed with regard to the box’s contents: if the box has a scrolling mechanism, the background scrolls with the box’s contents, and the background painting area and background positioning area are relative to the scrollable overflow area of the box rather than to the border framing them. Because the scrollable overflow area does not include the border area, for scroll containers the border-box value of background-clip may be treated the same as padding-box.
- `scroll@v
- `背景~画像$は,~box自身に固定され、 その内容と伴には~scrollしない(実質的に,~boxの~borderに~~留められる)。 ◎ The background is fixed with regard to the box itself and does not scroll with its contents. (It is effectively attached to the box’s border.)
画像が`表示域$(または`~page~box$)に固定されたとしても,それが可視になる部分は~boxの`背景~塗ng区画$に限られる。 他の場合は切取られない (そのような場合の挙動は,`§ 特別な要素の背景$を見よ)。 したがって,画像は、 敷詰められない限り,不可視になり得る。 ◎ Even if the image is fixed, it is still only visible when it is in the background painting area of the box or otherwise unclipped. (See § 4 Backgrounds of Special Elements for the cases when background images are not clipped.) Thus, unless the image is tiled, it may be invisible.
この例は、 文書が~scrollされても表示域に “貼り付く” ような, 縦に無限に連なる帯を作成する: ◎ This example creates an infinite vertical band that remains “glued” to the viewport when the document is scrolled.
body {
background: red url("pendant.gif");
background-repeat: repeat-y;
background-attachment: fixed;
}
注記: `fixed$v による背景を(例えば~hardware的な制限に因り)~supportしない~UAは、 ~keyword `fixed$v を伴う宣言を`無視-$することになる。 例えば: ◎ Note: User agents that do not support fixed backgrounds (for example due to limitations of the hardware platform) will ignore declarations with the keyword fixed. For example:
body {
/*
すべての~UA用:
◎
For all UAs:
*/
background: white url(paper.png) scroll;
/*
背景も固定できる~UA用:
◎
For UAs that do fixed backgrounds:
*/
background: white url(ledger.png) fixed;
}
h1 {
/*
すべての~UA用:
◎
For all UAs:
*/
background: silver;
/*
背景も固定できる~UA用:
◎
For UAs that do fixed backgrounds:
*/
background: url(stripe.png) fixed, white url(ledger.png) fixed;
}
[ `background-attachment$p と他の `background-*$p ]~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 3 Layering Multiple Background Images for how background-attachment interacts with other comma-separated background properties to form each background image layer.
2.6. 背景~位置決め: 各種 `background-position-*^p ~prop
この節は、 依然として作業~~段階にある。 込み入ったものは、 すべての[ `*-start^v, `*-end^v ]~keywordが健全に働くようにすることである。 ◎ This section is still being worked out. The tricky thing is making all the start/end keywords work sanely.
この~propは、 背景~位置の横方向~成分を指定する。 省略された起点~keywordは、 `left^v と見做される。 ◎ This property specifies the background position’s horizontal component. An omitted origin keyword is assumed to be left.
この~propは、 背景~位置の縦方向~成分を指定する。 省略された起点~keywordは、 `top^v と見做される。 ◎ This property specifies the background position’s vertical component. An omitted origin keyword is assumed to be top.
この~propは、 背景~位置の行内-軸~成分を指定する。 省略された起点~keywordは、 `start^v と見做される。 ◎ This property specifies the background position’s inline-axis component. An omitted origin keyword is assumed to be start.
この~propは、 背景~位置の塊-軸~成分を指定する。 省略された起点~keywordは、 `start^v と見做される。 ◎ This property specifies the background position’s block-axis component. An omitted origin keyword is assumed to be start.
- `percentage$t
- 百分率~値による[ 横/縦 ]~offsetは、[ `背景~位置決め区画$の[ 横幅/縦幅 ]から `背景~画像$の[ 横幅/縦幅 ]を減算した結果 ]に相対的になる。 この画像の~sizeは、 `background-size$p により与えられる。 ◎ A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by background-size.
-
例えば, 値~pair `0% 0%^v に対しては、 画像の左上~隅が~box — 通例的には【すなわち, `background-origin$p により他が指定されない限り】、 当の~boxの`~padding~box$【!padding edge】 — の左上~隅に整列される。 値~pair `100% 100%^v に対しては、 画像の右下~隅が,~boxの右下~隅に整列される。 値~pair `75% 50%^v に対しては、 画像の左上~隅から[ 75% 右, 50% 下 ]の地点が,~boxの左上~隅から[ 75% 右, 50% 下 ]の地点に整列される(下図)。 ◎ For example, with a value pair of 0% 0%, the upper left corner of the image is aligned with the upper left corner of, usually, the box’s padding edge. A value pair of 100% 100% places the lower right corner of the image in the lower right corner of the area. With a value pair of 75% 50%, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.
要素~内の画像~位置を示す図式 ◎ Diagram of image position within element
`background-position^p: `75% 50%^v の意味を表す図式。 ◎ Diagram of the meaning of background-position: 75% 50%. - `length$t
- 長さ値は、 固定された長さによる~offsetを与える。 例えば,値~pair `2cm 1cm^v に対しては、 画像は,その左上~隅が,`背景~位置決め区画$の左上~隅から[ 2cm 右, 1cm 下 ]の所に配置される。 ◎ A length value gives a fixed length as the offset. For example, with a value pair of 2cm 1cm, the upper left corner of the image is placed 2cm to the right and 1cm below the upper left corner of the background positioning area.
- `top@v
- 2 個以下の値が与えられた下では、 縦~位置に対する `0%^v に算出される。 他の場合、 直後の~offset値の起点を上辺にする。 ◎ Computes to 0% for the vertical position if one or two values are given, otherwise specifies the top edge as the origin for the next offset.
- `right@v
- 2 個以下の値が与えられた下では、 横~位置に対する `100%^v に算出される。 他の場合、 直後の~offset値の起点を右辺にする。 ◎ Computes to 100% for the horizontal position if one or two values are given, otherwise specifies the right edge as the origin for the next offset.
- `bottom@v
- 2 個以下の値が与えられた下では、 縦~位置に対する `100%^v に算出される。 他の場合、 直後の~offset値の起点を下辺にする。 ◎ Computes to 100% for the vertical position if one or two values are given, otherwise specifies the bottom edge as the origin for the next offset.
- `left@v
- 2 個以下の値が与えられた下では、 横~位置に対する `0%^v に算出される。 他の場合、 直後の~offset値の起点を左辺にする。 ◎ Computes to 0% for the horizontal position if one or two values are given, otherwise specifies the left edge as the origin for the next offset.
- `center@v
- 横~位置が指定されていなければ,横~位置に対する `50%^v (すなわち `left 50%^v )に算出され、 他の場合は,縦~位置に対する `50%^v (すなわち `top 50%^v )に算出される。 ◎ Computes to 50% (left 50%) for the horizontal position if the horizontal position is not otherwise specified, or 50% (top 50%) for the vertical position if it is.
下の一連の `background$p 略式~prop宣言は、 各種~keywordを利用して, `background-position$p に百分率による値を~~明示的に設定する。 ◎ The following background shorthand declarations use keywords to set background-position to the stated percentage values.
body { background: url("banner.jpeg") right top } /* 100% 0% */
body { background: url("banner.jpeg") top center } /* 50% 0% */
body { background: url("banner.jpeg") center } /* 50% 50% */
body { background: url("banner.jpeg") bottom } /* 50% 100% */
下の例では、 画像は,(繰返されずに)表示域の右下~隅に寄せられる。 ◎ In the example below, the (single) image is placed in the lower-right corner of the viewport.
body {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
背景~位置を、 左上でない隅から相対的にすることもできる。 例えば,次は、 背景~画像を[ 右端から `3em^v, 下端から `10px^v ]の所に置く。 ◎ Background positions can also be relative to other corners than the top left. For example, the following puts the background image 10px from the bottom and 3em from the right:
background-position: right 3em bottom 10px;
[ `background-position$p と他の `background-*$p ]~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 3 Layering Multiple Background Images for how background-position interacts with other comma-separated background properties to form each background image layer.
2.7. 背景~位置決め略式: `background-position^p ~prop
この~propは、 `背景~画像$たちが指定された場合には, 当の~boxの`背景~位置決め区画$の中での各~画像の(`~resize@#background-size$後における)初期~位置を指定する。 ◎ If background images have been specified, this property specifies their initial position (after any resizing) within their corresponding background positioning area.
この~propは、 次に挙げる~propを単独の宣言で設定する`略式~prop$である ⇒# `background-position-x$p, `background-position-y$p, `background-position-block$p, `background-position-inline$p ◎ This property is a shorthand property that sets background-position-x, background-position-y, background-position-block, and background-position-inline in a single declaration.
各`層~値$を与える `bg-position$t【!`bg-position@t】 は、 `position$t 値として解釈される — `整列~subject$として`~resize@#background-size$後における`背景~画像$, `整列~容器$として`背景~位置決め区画$を利用する下で。 ◎ Its value is given as a comma-separated list of <bg-position> values, which are interpreted as <position> values with the resized background image as the alignment subject and the background positioning area as the alignment container.
注記: `bg-position$t を成す 2 個の~keywordは,順序し直せる一方で、 ~keywordと[ 長さ/百分率 ]の組合nにおいては,そうでない。 なので、 `center left^v は妥当である一方で, `50% left^v は妥当でない。 ◎ Note: A pair of keywords can be reordered, while a combination of keyword and length or percentage cannot. So center left is valid while 50% left is not.
`bg-position$t 値に[ 3 個/4 個 ]の成分 【 2 個の~keywordと 1 個か 2 個の `length-percentage$t 】 が与えられた場合: ◎ If three or four values are given,\
-
各 `length-percentage$t は、
~offsetを表現する
— それらには,起点になる辺を指定する~keywordが先行していなければナラナイ。
例えば
`background-position^p: `bottom 10px right 20px^vは、[ 下辺から上へ `10px^v, 右辺から左へ `20px^v ]~offsetされた所を表現する。 ◎ then each <length-percentage> represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. For example, background-position: bottom 10px right 20px represents a 10px vertical offset up from the bottom edge and a 20px horizontal offset leftward from the right edge.\ - 3 個の成分が与えられた場合、 欠落~offsetは, 0 と見做される。 ◎ If three values are given, the missing offset is assumed to be zero.
[ 正な値/負な値 ]は、 `背景~位置決め区画$の辺から[ `内方^em/`外方^em ]への~offsetを表現する。 ◎ Positive values represent an offset inward from the edge of the background positioning area. Negative values represent an offset outward from the edge of the background positioning area.
次の宣言は、 左上~隅からの[ 横, 縦 ]~offsetを~~明示的に与える: ◎ The following declarations give the stated (horizontal, vertical) offsets from the top left corner:
background-position: left 10px top 15px; /* 10px, 15px */ background-position: left top ; /* 0px, 0px */ background-position: 10px 15px; /* 10px, 15px */ background-position: left 15px; /* 0px, 15px */ background-position: 10px top ; /* 10px, 0px */ background-position: left top 15px; /* 0px, 15px */ background-position: left 10px top ; /* 10px, 0px */
`bg-position@t【!`bg-position$t】 = `position$t | `position-three$t `position-three@t = [ `left$v | `center$v | `right$v ] && [ [ `top$v | `bottom$v ] `length-percentage$t ] | [ [ `left$v | `right$v ] `length-percentage$t ] && [ `top$v | `center$v | `bottom$v ] ]
`background-position$p に特有な構文~変種 `position-three$t においては、 `length-percentage$t が省略された場合の既定は `0%^v をとる。 ◎ The omitted <length-percentage> in the background-position-specific <position-three> syntax variant defaults to 0%.
【 `position$t と違って、 `position-three$t は, 論理-~keyword( `x-start^v, `block-end^v, 等々)を受容していないが、 将来には受容することになろう。 】
`下位prop$がどう設定されるかを指定する必要がある。 [`9690$issue] ◎ Specify how the longhand properties are set. [Issue #9690]
2.7.1. `background-position$p 値の直列化
`bg-position$t 型の[ `指定d値$/`算出d値$ ]は、 正確に, `CSS-VALUES-4$r にて `position$t 用に定義されるとおりに直列化される。 `position$t においては妥当でない 3 個の値からなる生成規則~用の直列化は、 等価な 4 個の値からなる構文と一致する — ただし、 `指定d値$の直列化においては,省略された~offsetは省略されたままであり続ける。 ◎ The specified value and computed value of the <bg-position> type serialize exactly as defined in [CSS-VALUES-4] for <position>. For 3-value productions (which are not valid in <position>), the specified value serialization is identical to the equivalent 4-value syntax except that the omitted offset remains omitted.
2.8. 塗ng区画: `background-clip^p ~prop
この~propは、 `背景~塗ng区画@ を決定する — 背景は、 この区画に塗られることになる。 その`層~値$の構文は: ◎ Determines the background painting area, which determines the area within which the background is painted. The syntax of the property is given with
`bg-clip@t = `visual-box$t | [ `border-area$v || `text$v ]
あるいは,これは、[ すべての値が一致し,この追加的な値 `text$v を伴う ]とする `-webkit-background-clip@~COMPAT#propdef--webkit-background-clip$p ~propを定義しているとするべきか? ◎ Or should this be defining the -webkit-background-clip property, saying that all the values are identical, with this additional text value?
- `visual-box$t
- 背景は、 当の要素の指定された~boxの中に塗られる(で切取られる)。 ◎ The background is painted within (clipped to) the specified box of the element.
- `text@v
- 背景は、[ ~border~box, ~textの幾何 ]の交差域の中に塗られる(で切取られる) — ~textの幾何は、[ 当の要素, その`~flow内$にある`浮動体$を成す子孫 ]内の[ 装飾, `圏点@~CSSTEXTDECOR#emphasis-marks$ ]を含む。 ~textの色には、 【透明か否かを問わず,】背景の塗ngに対する効果は無い。 ◎ The background is painted within (clipped to) the intersection of the border box and the geometry of the text including any decorations and emphasis marks in the element and its in-flow and floated descendants. The text color has no effect on the painting of the background.
- `border-area@v
- 背景は、 ~borderにより塗られる区画で切取られる — この区画は、[ `border-width$p, `border-style$p ]を織り込むが, `border-color$p により導入される透明度は無視される。 ◎ The background is clipped to the area painted by the border, taking border-width and border-style into account but ignoring any transparency introduced by border-color.
[ `border-area$v, `text$v ]どちらも指定された場合、 背景は,これら 2 個の区画を併せた区画の中に塗られる(で切取られる)。 ◎ If both border-area and text are specified, the background is painted within (clipped to) the union of these two areas.
注記: `根~要素$に対しては、 その`背景~塗ng区画$は異なるので, `background-clip$p ~propが指定されても効果は無い。 `§ 特別な要素の背景$を見よ。 ◎ Note: The root element has a different background painting area and thus the background-clip property has no effect when specified on it. See § 4 Backgrounds of Special Elements.
注記: 背景は常に、 ~border(もしあれば)の`背後^emに描かれる。 `CSS2$r `§ 積層~文脈の詳しい記述$を見よ。 ◎ Note: The background is always drawn behind the border, if any. See “Elaborate description of Stacking Contexts” in [CSS2] Appendix E.
`border-radius$p による`背景~塗ng区画$の形状への影響については、 `CSS-BORDERS-4$r `§ 隅の形状付け@~CSSBORDER#corner-shaping$ を見よ。 ◎ See CSS Borders and Box Decorations 4 § 3.7 Corner Shaping: the corner-*-shape properties for how border-radius affects the shape of the background painting area.
[ `background-clip$p と他の `background-*$p ]~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 3 Layering Multiple Background Images for how background-clip interacts with other comma-separated background properties to form each background image layer.
2.9. 位置決め区画: `background-origin^p ~prop
この~propは、 `背景~位置決め区画@ を決定する — 各`背景~画像$は、 その中に位置される。 複数個の`~box断片$として描画される要素 (例: 複数~行lにまたがる`行内~box$/ 複数~pageにまたがる~box) 用には、 それらの`背景~位置決め区画$(たち)を決定するために,[ `box-decoration-break$p `CSS-BREAK-3$r が,以下に挙げる どの~boxに対し演算するか ]を指定する。 ◎ This property determines the background positioning area: the area within which any background images are positioned. For elements rendered as multiple box fragments (e.g., inline boxes on several lines, boxes on several pages), specifies which boxes box-decoration-break [CSS-BREAK-3] operates on to determine the background positioning area(s).
この~prop用の各種`層~値$の意味は:
- `padding-box@v
- 画像~位置を`~padding~box$に相対的にする。 (~boxが断片化されない【!dor single boxes】なら、[ `0 0^v / `100% 100%^v ]が`~padding辺$の[ 左上~隅/右下~隅 ]に対応する。) ◎ The position is relative to the padding box. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.)
- `border-box@v
- 画像~位置を`~border~box$に相対的にする。 ◎ The position is relative to the border box.
- `content-box@v
- 画像~位置を`内容~box$に相対的にする。 ◎ The position is relative to the content box.
この`背景~画像~層$に対応する[ `background-attachment$p の`層~値$ ]が `fixed$v の事例では、 この~propの効果は無い — `背景~位置決め区画$は、 `初期~包含塊$になる。 ◎ If the background-attachment value for this layer is fixed, then this property has no effect: in this case the background positioning area is the initial containing block.
注記: 当の要素の[ `background-clip$p は `padding-box^v, `background-origin$p は `border-box$v, `background-position$p は `top left^v (初期~値), `~border幅$は 0 以外 ]をとる場合、 `背景~画像$は,【`背景~位置決め区画$の】[ 上端, 左端 ]辺で切取られることになる。 ◎ Note: If background-clip is padding-box, background-origin is border-box, background-position is top left (the initial value), and the element has a non-zero border, then the top and left edges of the background image will be clipped.
[ `background-origin$p と他の `background-*$p ]~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 3 Layering Multiple Background Images for how background-origin interacts with other comma-separated background properties to form each background image layer.
2.10. 画像の~sizing: `background-size^p ~prop
この~propは、 各`背景~画像$の~sizeを指定する。 ◎ This property specifies the size of each background image.\
この~prop用の`層~値$の構文は: ◎ The property’s value is given as a comma-separated list of <bg-size> values where
`bg-size@t
= [ `length-percentage [0,∞]$t | `auto$v ]{1,2}
| `cover$v
| `contain$v
各種 値の意味は: ◎ Values have the following meanings:
- `contain@v
- 画像を — `生来な縦横比$を有するならば,それを保全しつつ — その[ 横幅, 縦幅 ]を[ `背景~位置決め区画$の内側に収まる最~大な~size ]に拡縮する。 ◎ Scale the image, while preserving its natural aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.
- 【 この~sizeは、[ `拘束~矩形$として`背景~位置決め区画$ ]を与える下で,`~contain拘束$として解決される。 】
- `cover@v
- 画像を — `生来な縦横比$を有するならば,それを保全しつつ — その[ 横幅, 縦幅 ]を[ `背景~位置決め区画$を完全に覆う最~小な~size ]に拡縮する。 ◎ Scale the image, while preserving its natural aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.
- 【 この~sizeは、[ `拘束~矩形$として`背景~位置決め区画$ ]を与える下で,`~cover拘束$として解決される。 】
- [ `length-percentage [0,∞]$t | `auto@v ]{1,2}
- 2 個の成分~値は、 順に,画像の横幅, 縦幅を与える。 与えられた成分~値が 1 個だけの場合、 2 個目は `auto^v と見做される。 ◎ The first value gives the width of the corresponding image, the second value its height. If only one value is given the second is assumed to be auto.
- `percentage$t は、 `背景~位置決め区画$に相対的になる。 ◎ A <percentage> is relative to the background positioning area.
- 一方の次元に限り `auto$v の場合 ⇒# 画像は`生来な縦横比$を有するならば,それと他方の次元の~sizeを利用して解決される/ 画像は その次元において`生来な~size$を有するならば,それを利用する/ ~ELSE_ `100%^v と扱われる ◎ An auto value for one dimension is resolved by using the image’s natural aspect ratio and the size of the other dimension, or failing that, using the image’s natural size, or failing that, treating it as 100%.
- 両~次元とも `auto$v の場合 ⇒ 画像は,少なくとも一方の次元において`生来な~size$を有するならば,それ(それら)が利用されるべきであり、 欠落~次元は,前段落の `auto$v と同様に挙動する。 他の場合の~sizeは、 `contain$v と同様に決定される 【例:`生来な縦横比$しか無い~vector画像】 。 ◎ If both values are auto then the natural width and/or height of the image should be used, if any, the missing dimension (if any) behaving as auto as described above. If the image has neither natural size, its size is determined as for contain.
- 【 この~sizeは、[ `指定d~size$として所与の~size, `既定の~obj~size$として`背景~位置決め区画$ ]を与える下で,`既定の~sizing~algo$を利用して解決される。 】
- 負な値は妥当でない。 ◎ Negative values are invalid.
いくつか例を挙げる。 ◎ Here are some examples.\
次の例の背景~画像は、 内容~区画をちょうど覆うよう,各~次元について独立に伸張される。 ◎ The first example stretches the background image independently in both dimensions to completely cover the content area:
div {
background-image: url(plasma.png);
background-repeat: no-repeat;
background-size: 100% 100%;
background-origin: content-box;
}
次の例の背景~画像は、 2 個の複製が縦方向にちょうど収まるよう,伸張される。 縦横比は保全される: ◎ The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:
p {
background-image: url(tubes.png);
background-size: 50% auto;
background-origin: border-box;
}
次の例の背景~画像は、 縦横とも `15px^v になるよう強制される: ◎ This example forces the background image to be 15 by 15 pixels:
p {
background-size: 15px 15px;
background-image: url(tile.png);
}
次の例の背景~画像は、 `生来な~size$を利用する。 CSS 2 までは、 この挙動に限りアリになる。 ◎ This example uses the image’s natural size. Note that this is the only possible behavior in CSS level 1 and 2.
body {
background-size: auto; /* 既定 */
background-image: url(flower.png);
}
次の例の背景~画像は、 縦幅が指定d値の `30%^v から — ちょうど整数個の画像が収まるよう — 33.3% に切り上げられる。 30% のままだと、 3 個の画像に加えて, 4 個目の画像も部分的に現れることになる。 横幅に対しては、 そのちょうど 5 倍が`背景~位置決め区画$の横幅になるので,この切り上げは生じない。 ◎ The following example rounds the height of the image to 33.3%, up from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, three images fit exactly. The width of the image is 20% of the background positioning area width and is not rounded.
p {
background-image: url(chain.png);
background-repeat: no-repeat round;
background-size: 20% 30%;
}
ある次元において, `background-repeat$p が `round$v をとる場合、 ~UAは更に,上述による結果の画像~sizeを次に従って調整するモノトスル: ◎ If background-repeat is round for one (or both) dimensions, there is a second step. The UA must\
-
`round$v にされた各~次元ごとに、 `背景~位置決め区画$を整数個の画像で埋尽くせるように拡縮する — 調整-後の結果は,次の式で与えられる ⇒ %W ~DIV `round^op( %W ~DIV %L )
ここで:
- %L は調整-前の[ 横幅/縦幅 ]( ~NEQ 0 )
- %W は`背景~位置決め区画$の[ 横幅/縦幅 ]
-
`round^op( %X ) は %X に最も近い正な整数を返す関数
【 %X の小数部が 0.5 の場合にどうなるかは、 述べられていない — ある種の言語における同じ名前の関数と同じ挙動が意図されているかもしれないが。 】
- 加えて,[ 一方の次元において `background-repeat$p が `round$v ]かつ[ 他方の次元において `background-size$p が `auto$v ]の場合、 画像を元の縦横比へ戻すよう,他方の次元を拡縮する。 ◎ If background-repeat is round for one dimension only and if background-size is auto for the other dimension, then there is a third step: that other dimension is scaled so that the original aspect ratio is restored.
次の例の背景~画像は、 その`生来な~size$で示される: ◎ In this example the background image is shown at its natural size:
div {
background-image: url(image1.png);
background-repeat: repeat; /* 既定 */
background-size: auto; /* 既定 */
}
次の例の背景~画像は、 横幅は `3em^v へ, 縦幅は[ 元の縦横比が保たれる ]ように拡縮される: ◎ In the following example, the background is shown with a width of 3em and its height is scaled proportionally to keep the original aspect ratio:
div {
background-image: url(image2.png);
background-repeat: repeat; /* 既定 */
background-size: 3em; /* = '3em auto' */
}
次の例の背景~画像は、 横幅は[ その整数倍が背景の横幅になるような, `3em^v に最も近い~size ]へ, 縦幅は[ 元の縦横比が保たれる ]ように拡縮される: ◎ In the following example, the background is shown with a width of approximately 3em: scaled so that it fits a whole number of times in the width of the background. The height is scaled proportionally to keep the original aspect ratio:
div {
background-image: url(image3.png);
background-repeat: round repeat;
background-size: 3em auto;
}
次の例の背景~画像は、 横幅は `3em^v へ, 縦幅は[ その整数倍が背景の縦幅になるような,[ 元の縦横比を超えない縦幅 ]に最も近い~size ]へ拡縮される: ◎ In the following example, the background image is shown with a width of 3em and a height that is either the height corresponding to that width at the original aspect ratio or slightly less:
div {
background-image: url(image4.png);
background-repeat: repeat round;
background-size: 3em auto;
}
次の例の背景~画像は、 縦幅は[ その整数倍が背景の縦幅になるような, `4em^v に最も近い~size ]へ, 横幅は[ その整数倍が背景の横幅になるような,[ 縦幅 `4em^v と元の縦横比から得られる横幅 ]に最も近い~size ]へ拡縮される: ◎ In the following example, the background image is shown with a height of approximately 4em: scaled slightly so that it fits a whole number of times in the background height. The width is the approximately the width that corresponds to a 4em height at the original aspect ratio: scaled slightly so that it fits a whole number of times in the background width.
div {
background-image: url(image5.png);
background-repeat: round; /* = round round */
background-size: auto 4em;
}
背景~画像の横幅または縦幅が 0 に解決される場合、 その画像は表示されなくなる(画像が透明であったときと同じ効果になる)。 ◎ If the background image’s width or height resolves to zero, this causes the image not to be displayed. (The effect is the same as if it had been a transparent image.)
[ `background-size$p と他の `background-*$p ]~propの`層~値$たちから一連の`背景~画像~層$が どう形成されるかについては、 `§ 複数の背景~画像による多層化$を見よ。 ◎ See § 3 Layering Multiple Background Images for how background-size interacts with other comma-separated background properties to form each background image layer.
2.10.1. `background-size$p 値の直列化
`bg-size$t 型の[ `指定d値$, `算出d値$ ]は、 2 個目の値が `auto$v をとる場合でも, 常に 2 個の値として直列化される — `直列化は最短かつ最も後方-互換にする原則@~CSSOM1#serializing-css-values$に因り。 ◎ The specified value and computed value of the <bg-size> type always serialize as two values, even when the second value is auto, due to the shortest, most backwards-compatible serialization principle.
2.11. 背景~画像~層: `background-tbd^p 略式~prop
実装~用には準備済みでない ◎ Not Ready For Implementation
この節は、 実装~用には,まだ準備済みでない — 案を記録して,論を促すために存在する。 ◎ This section is not yet ready for implementation. It exists in this repository to record the ideas and promote discussion.
この節を成す何かを実装するよう試みる前に, ~CSS~WG( www-style@w3.org )に~~連絡されたし。 ◎ Before attempting to implement anything of this section, please contact the CSSWG at www-style@w3.org.
`background-tbd$p ~propは、 `background-color$p を除いて, `background$p 略式が設定する~propすべてを設定する`略式~prop$であり、 [ 背景~画像を位置しながら,`background-color^p は独立に~cascadeできるようにする ]ことを容易に宣言することを作者に許容する。 ◎ The background-tbd property is a shorthand property that sets all the same properties as the background shorthand except for background-color, allowing authors to easily declare and position background images while letting background-color cascade through independently.
この~propの名前は、 `9083$issue において論じられている。 【名前を成す `tbd^css は `To be determined^en の略語であり, “未定” を意味する。】 ◎ The name of this property is discussed in issue 9083.
この例は、 ~cascade後において, 2 個の背景~層を設定する。 `background-tbd$p を利用することにより、 以前に設定した `background-color$p は上書きされなくなる。 ◎ This example sets two background layers later in the cascade. By using background-tbd, the previously set background-color won’t be overridden.
p {
background-color: green;
}
p {
background-tbd:
url(a.png) top left,
url(b.png) top left no-repeat;
}
この例は,背景~画像に加えて背景~色を設定するよう試行するが、 それが働くためには, `background-tbd$p の代わりに `background$p を利用する必要がある。 なので、 `background-tbd^p 宣言は落とされることになる。 ◎ This example tries to set the background color in addition to the background image. But for that to work, background needs to be used instead of background-tbd. So the background-tbd declaration will be dropped.
p {
background: url(pass.png) green; /*
妥当
◎
valid
*/
background-tbd: url(fail.png) red; /*
妥当でない
◎
invalid
*/
}
2.12. 各種 `background-*^p ~prop用の略式: `background^p ~prop
`background$p ~propは、[ ~stylesheetにおける同じ場所で,ほとんどの `background-*$p ~propを一括して設定する ]ための`略式~prop$である。 ~commaで分離された各`層~値$が各`背景~画像~層$に対応し,その個数が層の個数になる。 宣言が妥当ならば、 この略式~propは,次を行う: ◎ The background property is a shorthand property for setting most background properties at the same place in the style sheet. The number of comma-separated items defines the number of background image layers. Given a valid declaration,\
-
次に挙げる各~prop %~prop に対し… ⇒# `background-image$p, `background-position$p, `background-size$p, `background-repeat$p, `background-origin$p, `background-clip$p, `background-attachment$p ◎終 …に対し ⇒ この~propの各`層~値$ %層~値 に対し ⇒ %~prop の対応する`層~値$を[ %層~値 に %~prop 用の値が明示的に指定されたならば,それ/ ~ELSE_ %~prop の`初期~値$ ]に設定する ◎ for each layer the shorthand first sets the corresponding value of each of background-image, background-position, background-size, background-repeat, background-origin, background-clip and background-attachment to that property’s initial value, then assigns any explicit values specified for this layer in the declaration.\
- `background-color$p ~propを[ `final-bg-layer$t にて それ用の値( `background-color$tp )が指定されたならば,それ/ ~ELSE_ その`初期~値$ ]に設定する ◎ Finally background-color is set to the specified color, if any, else set to its initial value.
この~prop用の`層~値$の構文は ( `final-bg-layer^t は最後の`層~値$用): ◎ This property’s value is given as a comma-separated list of values where
`bg-layer@t = `bg-image$t || `bg-position$t [ / `bg-size$t ]? || `repeat-style$t || `attachment$t || `bg-clip$t || `visual-box$t `final-bg-layer@t = `bg-image$t || `bg-position$t [ / `bg-size$t ]? || `repeat-style$t || `attachment$t || `bg-clip$t || `visual-box$t || `background-color$tp
注記: 背景~色( `background-color$tp )は、 `final-bg-layer$t 以外では,許可されない。 ◎ Note: A color is permitted in <final-bg-layer>, but not in <bg-layer>.
[ `visual-box$t, `bg-clip$t ]値は、[ `background-origin$p, `background-clip$p ]の`層~値$を設定する:
-
`visual-box^t 以外の `bg-clip$t 値が在る場合:
- `background-clip^p は、 それに設定される。
- `background-origin^p は、[ `visual-box^t も在るならば,それ/ ~ELSE_ `border-box$v ]に設定される。
-
他の場合:
- `background-origin^p は、 1 個目の `visual-box^t に設定される。
- `background-clip^p は、[ 2 個目の `visual-box^t も在るならば それ/ ~ELSE_ 1 個目の `visual-box^t ]に設定される。
次の例における 1 個目の規則は、 `background-color$p 用の値( `red^v )しか与えていないので、 他の~propは,各自の`初期~値$に設定される。 2 個目の規則は、 多数の~prop用に値を指定している: ◎ In the first rule of the following example, only a value for background-color has been given and the other individual properties are set to their initial values. In the second rule, many individual properties have been specified.
body {
background: red;
}
p {
background: url("chess.png") 40% / 10em gray round fixed border-box;
}
1 個目の規則は、 次と等価になる: ◎ The first rule is equivalent to:
body {
background-color: red;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;
background-image: none;
}
2 個目の規則は、 次と等価になる: ◎ The second is equivalent to:
p {
background-color: gray;
background-position: 40% 50%;
background-size: 10em auto;
background-repeat: round;
background-clip: border-box;
background-origin: border-box;
background-attachment: fixed;
background-image: url(chess.png);
}
次の例は、 背景~色( `#CCC^v )と 背景~画像( `url(metal.jpg)^v ) を設定する。 画像は、 要素の横幅にちょうど~~収まるように拡縮される。 ◎ The following example shows how a both a background color (#CCC) and a background image (url(metal.jpg)) are set. The image is rescaled to the full width of the element:
E {
background: #CCC url("metal.jpg") top left / 100% auto no-repeat;
}
等価性を示す別の例: ◎ Another example shows equivalence:
div {
background: padding-box url(paper.jpg) white center;
}
div {
background-color: white;
background-image: url(paper.jpg);
background-repeat: repeat;
background-attachment: scroll;
background-position: center;
background-clip: padding-box;
background-origin: padding-box;
background-size: auto auto;
}
~commaで分離された複数個の層~値からなる宣言: ◎ The following declaration with multiple, comma-separated values
background: url(a.png) top left no-repeat,
url(b.png) center / 100% 100% no-repeat,
url(c.png) white;
上の宣言は、 次と等価になる: ◎ is equivalent to
background-image: url(a.png), url(b.png), url(c.png); background-position: top left, center, top left; background-repeat: no-repeat, no-repeat, repeat; background-clip: border-box, border-box, border-box; background-origin: padding-box, padding-box, padding-box; background-size: auto auto, 100% 100%, auto auto; background-attachment: scroll, scroll, scroll; background-color: white;
3. 複数の背景~画像による多層化
~boxの背景は、 複数個の `背景~画像~層@ ( `background image layer^en ) を伴い得る。 層の個数は、 `background-image$p ~propに指定された~commaで分離された値の個数から決定される。 値 `none$v に対しても,依然として層は作成されることに注意。 ◎ The background of a box can have multiple background image layers. The number of layers is determined by the number of comma-separated values in the background-image property. Note that a value of none still creates a layer.
他の各種 `background-*$p ~prop(一部を除く)も、 同様に~commaで分離された値たちが成す~listを値にとり,同じ順序で各 層に対応~付けられる。 ~listを成す各~値は `層~値@ と総称される†。 各`背景~画像$は、 各~propの同じ層に対応する`層~値$に則って,~sizeされ, 位置され, 敷詰められる。 層~値~listの中の層~数を超える部分の層~値は利用されない。 ~propに指定された層~値の個数が層~数に満たない場合、 `~UA$は,その個数が十分に足るまで 層~値~listを繰返して,`使用~値$を計算するモノトスル。 ◎ Each of the background images is sized, positioned, and tiled according to the corresponding value in the other background properties. The lists are matched up from the first value: excess values at the end are not used. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.
【† `層~値$は、 他所を簡潔に述べる — ~propの値~全体や他のより細分化された成分~値と区別する記述を容易にするなど — ために,この訳に導入した用語である。 】
例えば、 次の宣言~群: ◎ For example, this set of declarations:
background-image: url(flower.png), url(ball.png), url(grass.png); background-position: center center, 20% 80%, top left, bottom right; background-origin: border-box, content-box; background-repeat: no-repeat;
は、 次の宣言~群 — `background-position$p 値を成す余分な`層~値$が落とされ, `background-origin$p と `background-repeat$p に対する欠落~層~値が補填された宣言 — と正確に同じ効果になる: ◎ has exactly the same effect as this set, with the extra position dropped and the missing values for background-origin and background-repeat filled in (emphasized for clarity):
background-image: url(flower.png), url(ball.png), url(grass.png); background-position: center center, 20% 80%, top left; background-origin: border-box, content-box, border-box; background-repeat: no-repeat, no-repeat, no-repeat;
~listを成す最初の画像が利用者に最も近い`背景~画像~層$になり、 その次の画像が その背後に塗られる,等々となる。 背景~色も(もし在れば),他のすべての層の背後に塗られる。 ◎ The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. The background color, if present, is painted below all of the other layers.
注記: 各種 `border-image-*@~CSSBORDER#border-images$p ~propも、 背景になる画像を定義し得る。 それは、 各種 `background-*$p ~propにより作成される`背景~画像~層$より手前に塗られる。 ◎ Note: The border-image properties can also define a background image, which, if present, is painted on top of the background layers created by the background properties.
4. 特別な要素の背景
文書の`~canvas$は、 文書が描画される無限な~~平面である `CSS2$r 。 ~canvasに対応する要素は無いので、 ~canvasに対する~style付けを許容するため, `根~要素$(~HTMLの場合は `body$e 要素)の背景は以下に述べるとおり~canvasへ伝播される。 ただし,~canvasに利用される背景を与える要素の `display$p が `none^v の場合、 `~canvas背景$は透明になる。 ◎ The document canvas is the infinite surface over which the document is rendered. [CSS2] Since no element corresponds to the canvas, in order to allow styling of the canvas CSS propagates the background of the root element (or, in the case of HTML, the <body> element) as described below. However, if the element whose background would be used for the canvas is display: none, then the canvas background is transparent.
`~canvas背景$が不透明でない場合、 `~canvas表面@ が透けて示される。 `~canvas表面$の生地は、 ~UAに依存する (概して、 不透明な白【今や, `Canvas@~CSSCOLOR#valdef-color-canvas$v と同じ色】になるが)。 ◎ If the canvas background is not opaque, the canvas surface below it shows through. The texture of the canvas surface is UA-dependent (but is typically an opaque white).
4.1. ~canvas背景と根~要素
`根~要素$の背景は, `~canvas背景@ になり、 その`背景~塗ng区画$は,`~canvas$全体を覆うように拡張される 【すなわち、背景は,`背景~位置決め区画$の外側で切取られない】 。 しかしながら,各`背景~画像$は、 `根~要素$の~boxに相対的に~sizeされ, 位置される — この~boxだけに塗られたかのように (言い換えれば、 `背景~位置決め区画$は,根~要素に対するときと同じに決定される)。 `根~要素$がこの背景を塗直すことはない — すなわち,その背景の`使用~値$は、 `transparent$v になる。 ◎ The background of the root element becomes the canvas background and its background painting area extends to cover the entire canvas. However, any images are sized and positioned relative to the root element’s box as if they were painted for that element alone. (In other words, the background positioning area is determined as for the root element.) The root element does not paint this background again, i.e., the used value of its background is transparent.
4.2. ~canvasの背景と~HTML `body^e 要素
`根~要素$ %根 が~HTML(`~XML構文@~HTMLxml#the-xhtml-syntax$も含む) `html$e 要素である文書に対しては,[ %根 の `background-image$p の`算出d値$ ~EQ `none$v ]~AND[ %根 の `background-color$p の`算出d値$ ~EQ `transparent$v ]ならば、 ~UAは代わりに, 各種 `background-*$p ~propの`算出d値$を[ %根 の子である最初の~HTML `body$e 要素 ]から伝播させるモノトスル。 その `body^e 要素の各 `background-*$p ~propの`使用~値$は,各自の`初期~値$になり、 伝播された算出d値たちは, %根 に指定されたかのように扱われる。 ~HTML文書の作者には、 ~canvas背景を指定する際には, `html^e 要素ではなく `body^e 要素を利用することが推奨される。 ◎ For documents whose root element is an HTML HTML element or an XHTML html element [HTML]: if the computed value of background-image on the root element is none and its background-color is transparent, user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY or XHTML body child element. The used values of that BODY element’s background properties are their initial values, and the propagated values are treated as if they were specified on the root element. It is recommended that authors of HTML documents specify the canvas background using the BODY element rather than the HTML element.
注記: `封込め$を利用している場合、 ~HTML `body$e 要素に対するこの特別な取扱いは不能化される。 詳細は、 `CSS-CONTAIN-1$r `§ 強い封込め@~CSSCONTAIN#contain-property$( `contain^p ~prop)を見よ。 ◎ Note: Using containment disables this special handling of the HTML body element. See the CSS Containment 1 § 2 Strong Containment: the contain property for details.
これらの規則に従い、 次の~HTML文書の下層~canvasは “marble” 背景を持つことになる: ◎ According to these rules, the canvas underlying the following HTML document will have a “marble” background:
<!DOCTYPE html【! PUBLIC '-//W3C//DTD HTML 4.0//EN'】>
<html>
<head>
<title>Setting the canvas background</title>
<style type="text/css">
body { background: url("http://example.org/marble.png") }
</style>
</head>
<body>
<p>My background is marble.</p>
</body>
</html>
4.3. `first-line^pe 疑似要素の背景
`first-line$pe 疑似要素は、 背景の目的においては,行内~levelの要素と同様に扱われる ( `CSS2$r § 5.12.1 を見よ)。 したがって,`整形される最初の行l$は、 例えば左寄せの下では,その背景を右端~辺まで拡張することは必要yでない。 ◎ The ::first-line pseudo-element is like an inline-level element for the purposes of the background (see section 5.12.1 of [CSS2]). That means, e.g., that in a left-justified first line, the background does not necessarily extend all the way to the right edge.
変更点
- `CSS3BG$r からの追加 ◎ 5.1. Additions since [CSS3BG]
- `background-position$p を略式へ転換して,その各種[ 物理-/論理- ]下位propを追加した。 ◎ turned background-position into a shorthand and added physical and logical longhands
- `bg-position$t に論理-~keywordたちを追加した。 ◎ added logical keywords to <bg-position>
- `background-clip$p 用の値として,[ `border-area$v, `text$v ]を追加した。 ◎ added border-area and text values to background-clip
- `background-tbd$p を追加した。 ◎ added background-tbd
- 各種 `background-repeat-*^p 下位propを追加した。 ◎ added background-repeat-* longhands
- `background-repeat$p 用の値として,論理-~keyword[ `repeat-block$v, `repeat-inline$v ]を追加した。 ◎ added logical keywords repeat-block and repeat-inline to background-repeat
謝辞
この~moduleの前身である[ `CSS1$r, `CSS2$r, `CSS3BG$r ]に対する多くの貢献者たちに加えて、 編集者は, 特定的に この~level 4 に示唆と~feedbackを寄せられた次に挙げる方々に感謝したい ⇒ `Tab Atkins^en, `Håkon Wium Lie^en ◎ In addition to the many contributors to the [CSS1], [CSS2], and [CSS3BG] predecessors to this module, the editors would like to thank Tab Atkins, and Håkon Wium Lie for their suggestions and feedback specifically for this Level 4.
~privacyの考慮点
この仕様に対し報告された,新たな~privacyの考慮点は、 無い。 ◎ No new privacy considerations have been reported on this specification.
~securityの考慮点
この仕様に対し報告された,新たな~securityの考慮点は、 無い。 ◎ No new security considerations have been reported on this specification.