background
background 是一個 簡寫 CSS 屬性，可以一次性設定所有的背景樣式屬性，例如顏色、圖片、原點和尺寸，或重複方式。在 background 簡寫屬性值宣告中未設定的元件屬性將被設為它們的預設值。
試一試
background: green;
background: content-box radial-gradient(crimson, skyblue);
background: no-repeat url("/shared-assets/images/examples/lizard.png");
background: left 5% / 15% 60% repeat-x
url("/shared-assets/images/examples/star.png");
background:
center / contain no-repeat
url("/shared-assets/images/examples/firefox-logo.svg"),
#eeeeee 35% url("/shared-assets/images/examples/lizard.png");
<section id="default-example">
<div id="example-element"></div>
</section>
#example-element {
min-width: 100%;
min-height: 100%;
padding: 10%;
}
構成屬性
此屬性是以下 CSS 屬性的簡寫：
語法
css
/* Using a <background-color> */
background: green;
/* Using a <bg-image> and <repeat-style> */
background: url("test.jpg") repeat-y;
/* Using a <visual-box> and <'background-color'> */
background: border-box red;
/* A single image, centered and scaled */
background: no-repeat center/80% url("../img/image.png");
/* Global values */
background: inherit;
background: initial;
background: revert;
background: revert-layer;
background: unset;
background 屬性可以指定為一個或多個背景層，以逗號分隔。
每一層的語法如下：
-
每一層可以包含以下值的零次或一次出現：
<attachment><bg-image><bg-position><bg-size><repeat-style>
-
<bg-size>值只能緊跟在<bg-position>之後，並用“/”字元分隔，例如：center/80%。 -
<visual-box>值可以出現零次、一次或兩次。如果出現一次，它會同時設定background-origin和background-clip。如果出現兩次，第一次出現會設定background-origin，第二次則設定background-clip。 -
<'background-color'>值只能在指定的最後一層中包含。
值
<attachment>-
見
background-attachment。預設值：scroll。 <visual-box>-
見
background-clip和background-origin。預設值分別為：border-box和padding-box。 <'background-color'>-
見
background-color。預設值：transparent。 <bg-image>-
見
background-image。預設值：none。 <bg-position>-
見
background-position。預設值：0% 0%。 <repeat-style>-
見
background-repeat。預設值：repeat。 <bg-size>-
見
background-size。預設值：auto。
以下三行 CSS 程式碼是等效的：
css
background: none;
background: transparent;
background: repeat scroll 0% 0% / auto padding-box border-box none transparent;
正式定義
| 初始值 | 作為簡寫中的每個屬性
|
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 否 |
| 百分比 | 作為簡寫中的每個屬性
|
| 計算值 | 作為簡寫中的每個屬性
|
| 動畫型別 | 作為簡寫中的每個屬性
|
正式語法
background =
<bg-layer>#? , <final-bg-layer>
<bg-layer> =
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<visual-box> ||
<visual-box>
<final-bg-layer> =
<bg-image> ||
<bg-position> [ / <bg-size> ]? ||
<repeat-style> ||
<attachment> ||
<visual-box> ||
<visual-box> ||
<'background-color'>
<bg-image> =
<image> |
none
<bg-position> =
<position> |
<position-three>
<bg-size> =
[ <length-percentage [0,∞]> | auto ]{1,2} |
cover |
contain
<repeat-style> =
repeat-x |
repeat-y |
<repetition>{1,2}
<attachment> =
scroll |
fixed |
local
<visual-box> =
content-box |
padding-box |
border-box
<background-color> =
<color>
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<position> =
<position-one> |
<position-two> |
<position-four>
<position-three> =
[ left | center | right ] && [ [ top | bottom ] <length-percentage> ] |
[ [ left | right ] <length-percentage> ] && [ top | center | bottom ]
<length-percentage> =
<length> |
<percentage>
<repetition> =
repeat |
space |
round |
no-repeat
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<position-one> =
left |
center |
right |
top |
bottom |
x-start |
x-end |
y-start |
y-end |
block-start |
block-end |
inline-start |
inline-end |
<length-percentage>
<position-two> =
[ left | center | right | x-start | x-end ] && [ top | center | bottom | y-start | y-end ] |
[ left | center | right | x-start | x-end | <length-percentage> ] [ top | center | bottom | y-start | y-end | <length-percentage> ] |
[ block-start | center | block-end ] && [ inline-start | center | inline-end ] |
[ start | center | end ]{2}
<position-four> =
[ [ left | right | x-start | x-end ] <length-percentage> ] && [ [ top | bottom | y-start | y-end ] <length-percentage> ] |
[ [ block-start | block-end ] <length-percentage> ] && [ [ inline-start | inline-end ] <length-percentage> ] |
[ [ start | end ] <length-percentage> ]{2}
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
無障礙
瀏覽器不會向輔助技術提供任何有關背景影像的特殊資訊。這對於螢幕閱讀器來說尤其重要，因為螢幕閱讀器不會播報背景影像的存在，因此也不會向其使用者傳達任何資訊。如果影像包含對理解頁面整體目的至關重要的資訊，最好在文件中以語義化的方式對其進行描述。
示例
使用顏色關鍵字和影像設定背景
HTML
html
<p class="top-banner">
Starry sky<br />
Twinkle twinkle<br />
Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>
CSS
css
.warning {
background: pink;
}
.top-banner {
background: url("star-solid.gif") #9999ff repeat-y fixed;
}
結果
規範
| 規範 |
|---|
| CSS Backgrounds and Borders Module Level 3 # background |
瀏覽器相容性
載入中…