試一試
background-image: url("/shared-assets/images/examples/lizard.png");
background-image:
url("/shared-assets/images/examples/lizard.png"),
url("/shared-assets/images/examples/star.png");
background-image:
url("/shared-assets/images/examples/star.png"),
url("/shared-assets/images/examples/lizard.png");
background-image:
linear-gradient(rgb(0 0 255 / 0.5), rgb(255 255 0 / 0.5)),
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%;
}
背景圖片以堆疊上下文層的方式繪製，彼此堆疊。指定的第一層圖片被繪製得好像它最接近使用者。
元素的邊框繪製在它們之上，background-color 繪製在它們之下。圖片相對於盒子及其邊框的繪製方式由 background-clip 和 background-origin CSS 屬性定義。
如果指定的圖片無法繪製（例如，當指定 URI 表示的檔案無法載入時），瀏覽器會像處理 none 值一樣處理它。
注意： 即使圖片是不透明的，並且在正常情況下顏色不會顯示，網頁開發者也應該始終指定一個 background-color。如果圖片無法載入——例如，當網路中斷時——背景顏色將作為備用。
語法
css
/* single image */
background-image: linear-gradient(black, white);
background-image: url("cat-front.png");
/* multiple images */
background-image:
radial-gradient(circle, transparent 45%, black 48%),
radial-gradient(ellipse farthest-corner, #fc1c14 20%, #cf15cf 80%);
/* Global values */
background-image: inherit;
background-image: initial;
background-image: revert;
background-image: revert-layer;
background-image: unset;
每個背景圖片都指定為關鍵字 none 或 <image> 值。
要指定多個背景圖片，請提供多個值，並用逗號分隔。
值
無障礙
瀏覽器不會向輔助技術提供任何有關背景影像的特殊資訊。這對於螢幕閱讀器來說尤其重要，因為螢幕閱讀器不會播報背景影像的存在，因此也不會向其使用者傳達任何資訊。如果影像包含對理解頁面整體目的至關重要的資訊，最好在文件中以語義化的方式對其進行描述。
此外，重要的是要確保背景圖片與前景文字之間的對比度足夠高，以便視力低下的人能夠閱讀頁面內容。
顏色對比度是透過比較文字和背景顏色值的亮度來確定的。為了滿足網頁內容可訪問性指南 (WCAG)，正文內容的對比度要求為 4.5:1，對於標題等較大文字，要求為 3:1。大文字定義為 24px 或更大，或者加粗的 18.66px 或更大。
正式定義
| 初始值 | none |
|---|---|
| 應用於 | 所有元素。也適用於 ::first-letter 和 ::first-line。 |
| 繼承性 | 否 |
| 計算值 | 按指定，但 <url> 值變為絕對路徑 |
| 動畫型別 | 離散 |
正式語法
background-image =
<bg-image>#
<bg-image> =
<image> |
none
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<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
<div>
<p class="cats-and-stars">This paragraph is full of cats<br />and stars.</p>
<p>This paragraph is not.</p>
<p class="cats-and-stars">Here are more cats for you.<br />Look at them!</p>
<p>And no more.</p>
</div>
CSS
css
p {
font-weight: bold;
font-size: 1.5em;
color: white;
text-shadow: 0.07em 0.07em 0.05em black;
background-image: none;
background-color: transparent;
}
div {
background-image: url("mdn_logo_only_color.png");
}
.cats-and-stars {
background-image: url("star-transparent.gif"), url("cat-front.png");
background-color: transparent;
}
結果
規範
| 規範 |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-image |
瀏覽器相容性
載入中…