CSS-背景來源|background-origin

background-origin 規定了指定背景圖片background-image屬性的原點位置的背景相對區域.

/* Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: unset;

請注意background-origin被忽略時background-attachment是fixed…

注意：當使用 background-attachment為fixed時，該屬性將被忽略不起作用。

初始值	padding-box
適用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是繼承屬性	no
適用媒體	visual
計算值	as specified
Animation type	discrete
正規順序	the unique non-ambiguous order defined by the formal grammar

語法

background-origin屬性被指定為下面列出的關鍵字值之一。

值

border-box背景是相對於邊框的位置。padding-box背景是相對於填充框定位的。content-box背景是相對於內容框定位的。

正式語法

<box>#where 
<box> = border-box | padding-box | content-box

示例

.example {
  border: 10px double;
  padding: 10px;
  background: url(`image.jpg`);
  background-position: center left;
  background-origin: content-box;
}

#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url(`image.gif`);
  background-repeat: no-repeat;
  background-origin: border-box;
}

div {
  background-image: url(`logo.jpg`), url(`mainback.png`); /* Applies two images to the background */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

規範

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of `background-origin` in that specification.	Candidate Recommendation	Initial definition.

瀏覽器相容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	1.01	12	4.02 3	9.04	10.5	3.01
content-box	1.0	12	4.02	9.05	10.5	3.01

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	4.1	(Yes)	(Yes)	14.0	7.1	12.1	(Yes)
content-box	4.1	(Yes)	(Yes)	14.0	7.1	12.1	(Yes)

1. Webkit也支援此屬性的字首版本，在這種情況下，除了目前的關鍵字，替代同義詞有：padding，border，和content。

2. Gecko從1.1版到1.9.2版，對應於Firefox 1.0到3.6，都支援一個不同的字首語法：-moz-background-clip: padding | border。

3. 從Firefox 49版本以後，也支援該屬性的-webkit字首版本。

4. 在IE 7及以前，Internet Explorer的行為就像background-origin: border-box被設定了一樣。在Internet Explorer 8中，就像常規預設值background-origin: padding-box被設定了一樣。

5. 在IE 7和IE 9中，它總是表現得像background-clip: padding如果設定為overflow: hidden | auto | scroll

CSS-背景來源|background-origin

語法

值

正式語法

示例

規範

瀏覽器相容性

相關文章