CSS-背景 | background

CSS 

background

速記屬性允許您一次調整所有可用的背景樣式選項，包括彩色圖像，原點和大小，重複方法以及其他功能。

background

可用于對一個或多個設定值：

background-clip

，

background-color

background-image

background-origin

background-position

background-repeat

background-size

，和

background-attachment

。

/* Using a <background-color> */
background: green;

/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;

/* Using a <box> and <background-color> */
background: border-box red;

/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");      

background

CSS簡寫屬性明确配置設定給定的值，并設定缺少的屬性為初始值。

初始值	作為簡寫的每個屬性：background-image：none background-position：0％0％background-size：auto auto background-repeat：repeat background-origin：padding-box background-clip：border-box background-attachment ：滾動背景顔色：透明
适用于	所有元素。它也适用于:: first-letter和:: first-line。
遺傳	沒有
百分比	作為簡寫的每個屬性：background-position：指背景定位區域的大小減去背景圖像的大小; 大小是指水準偏移的寬度和垂直偏移的高度background-size：相對于背景定位區域
媒體	視覺
計算值	作為速記的每個屬性：background-image：如指定的那樣，但url值被設定為absolute-background-position：一個清單，每個項目由兩個關鍵字組成，這兩個關鍵字分别代表原點和來自該原點的兩個偏移量，每個偏移量都以絕對值長度（如果給定<length>），否則為百分比background-size：按照指定，但相對長度轉換為絕對長度background-repeat：清單，每個項目由兩個關鍵字組成，每個次元一個background-origin：如指定background-clip：指定background-attachment：指定background-color：計算顔色
動畫類型	作為簡寫的每個屬性：background-color：一種顔色background-image：離散background-clip：離散background-position：長度，百分比或calc的簡單清單的可重複清單background-size：簡單清單的可重複清單長度，百分比或計算背景重複：離散背景附件：離散
規範的順序	出現在價值形式文法中的順序

• background-image

  : 

  none

• background-position

  0% 0%

• background-size

  auto auto

• background-repeat

  repeat

• background-origin

  padding-box

• background-clip

  border-box

• background-attachment

  scroll

• background-color

  transparent

Applies to all elements. It also applies to [`::first-letter`](::first-letter) and [`::first-line`](::first-line).   [Inherited](inheritance) no   Percentages as each of the properties of the shorthand:      

• background-position

  ：指背景定位區域的大小減去背景圖像的大小; 大小是指水準偏移的寬度和垂直偏移的高度

• background-size

  ：相對于背景定位區域

Media visual   [Computed value](computed_value) as each of the properties of the shorthand:      

• background-image

  ：如指定的那樣，但是具有

  url

  絕對值

• background-position

  ：一個清單，每個項目由兩個關鍵字組成，代表原點和來自該原點的兩個偏移量，每個以絕對長度給出（如果給定 

  <length>

  ），否則以百分比

• background-size

  ：按照規定，但相對長度轉換為絕對長度

• background-repeat

  ：一個清單，每個項目由兩個關鍵字組成，每個次元一個

• background-origin

  ： 作為指定

• background-clip

• background-attachment

• background-color

  ：計算顔色

Animation type as each of the properties of the shorthand:      

• background-color

  ：一種顔色

• background-image

  ：離散

• background-clip

• background-position

  ：長度，百分比或計算的簡單清單的可重複清單

• background-size

• background-repeat

• background-attachment

Canonical order order of appearance in the formal grammar of the values        

句法

background

屬性被指定為一個或多個背景層，用逗号分隔。

每個圖層的文法如下所示：

• 每個圖層可能包含零個或一個以下任何值：

  • <attachment>

  • <bg-image>

  • <position>

  • <bg-size>

  • <repeat-style>

• <bg-size>

  值可能僅在緊跟在

  <position>

  “/”字元之後，如下所示：“ 

  center/80%

  ”。

• <box>

  值可能包含零次，一次或兩次。如果包含一次，它會同時設定

  background-origin

  和

  background-clip

  。如果它包含兩次，第一次出現

  background-origin

  ，第二次

  background-clip

• <background-color>

  值可能隻包含在指定的最後一個圖層中。

值

<attachment>

參見

background-attachment<box>

background-clip

background-origin<background-color>

background-color<bg-image>

background-image<position>

background-position<repeat-style>

background-repeat<bg-size>

background-size

形式文法

[ <bg-layer> , ]* <final-bg-layer>where <bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box>{1,2}<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>where <bg-image> = none | <image><position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]<bg-size> = [ <length-percentage> | auto ]{1,2} | cover | contain<repeat-style> = repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{1,2}<attachment> = scroll | fixed | local<box> = border-box | padding-box | content-boxwhere <image> = <url> | <image()> | <image-set()> | <element()> | <cross-fade()> | <gradient><length-percentage> = <length> | <percentage>where <image()> = image( [ [ <image> | <string> ]? , <color>? ]! )<image-set()> = image-set( <image-set-option># )<element()> = element( <id-selector> )<cross-fade()> = cross-fade( <cf-mixing-image> , <cf-final-image>? )<gradient> = <linear-gradient()> | <repeating-linear-gradient()> | <radial-gradient()> | <repeating-radial-gradient()>where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color><image-set-option> = [ <image> | <string> ] <resolution><cf-mixing-image> = <percentage>? && <image><cf-final-image> = <image> | <color><linear-gradient()> = linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<repeating-linear-gradient()> = repeating-linear-gradient( [ <angle> | to <side-or-corner> ]? , <color-stop-list> )<radial-gradient()> = radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )<repeating-radial-gradient()> = repeating-radial-gradient( [ <ending-shape> || <size> ]? [ at <position> ]? , <color-stop-list> )where <rgb()> = rgb( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<rgba()> = rgba( [ [ <percentage>{3} | <number>{3} ] [ / <alpha-value> ]? ] | [ [ <percentage>#{3} | <number>#{3} ] , <alpha-value>? ] )<hsl()> = hsl( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )<hsla()> = hsla( [ <hue> <percentage> <percentage> [ / <alpha-value> ]? ] | [ <hue>, <percentage>, <percentage>, <alpha-value>? ] )<side-or-corner> = [ left | right ] || [ top | bottom ]<color-stop-list> = <color-stop>#{2,}<ending-shape> = circle | ellipse<size> = closest-side | farthest-side | closest-corner | farthest-corner | <length> | <length-percentage>{2}where <alpha-value> = <number> | <percentage><hue> = <number> | <angle><color-stop> = <color> <length-percentage>?      

示例

HTML

<p class="topbanner">
  Starry sky<br/>
  Twinkle twinkle<br/>
  Starry sky
</p>
<p class="warning">Here is a paragraph<p>      

CSS

.warning { 
  background: pink; 
}

.topbanner { 
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; 
}      

結果

​

規範

	狀态	評論
CSS背景和邊框子產品級别3在該規範中定義“背景”。	候選推薦	速記屬性已擴充為支援多個背景和新的背景大小，背景源和背景剪輯屬性。
CSS級别2（修訂1）該規範中“背景”的定義。	建議	沒有重大變化
CSS級别1該規範中“背景”的定義。		初始定義

浏覽器相容性

特征	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
基本支援	1.0	12		4	3.5
多個背景			3.6	9	10.5	1.3
SVG圖像作為背景	31.0				21.0	5.1
背景尺寸longhand的值
背景來源的longhand值			22.0
背景剪輯longhand的值

糾錯

	Android	Chrome for Android	Edge mbile	Firefox for Android	IE mobile	Opera Android	iOS Safari
	2.1	?	（是）		10.0	5.0	3.2
	3.0						4.2
				18.0