?
This document uses PHP Chinese website manual Release
background-image:<bg-image>[ , <bg-image> ]*
<bg-image> = <image> | none
默認值:none
適用于:所有元素
繼承性:無
動畫性:否
計算值:指定值
none:
無背景圖。
<image>:
使用絕對或相對地址指或者創(chuàng)建漸變色來確定圖像。
如果設置了 <' background-image '>,同時也建議設置 <' background-color '> 用于當背景圖像不可見時保持與文本顏色有一定的對比度。
如果定義了多組背景圖,且背景圖之間有重疊,寫在前面的將會蓋在寫在后面的圖像之上。
對應的腳本特性為backgroundImage。
淺綠 = 支持
紅色 = 不支持
粉色 = 部分支持
Values | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Android Browser | Android Chrome |
---|---|---|---|---|---|---|---|---|
Basic Support | 6.0+ | 2.0+ | 4.0+ | 3.1+ | 3.5+ | 3.2+ | 2.1+ | 18.0+ |
Multiple image 多組圖像 | 6.0-8.0 | |||||||
9.0+ |
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>background-image_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test strong { font-size: 16px; } .test .url p { padding-top: 200px; background-image: url(skin/p_103x196_1.jpg); background-repeat: no-repeat; } .test .gradient p { height: 100px; background-image: linear-gradient(to top, #45B5DA, #0382AD); } .test .multiple p { padding-top: 200px; background-image: url(skin/p_103x196_1.jpg), url(skin/p_103x196_2.jpg), url(skin/p_103x196_3.jpg); background-repeat: no-repeat; background-position: 0 0, 100px 0, 200px 0; } </style> </head> <body> <ul class="test"> <li class="url"> <strong>使用url()引入背景圖像</strong> <p>使用url()可以是絕對或相對路徑</p> </li> <li class="gradient"> <strong>使用漸變繪制背景圖像</strong> <p>漸變種類有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient</p> </li> <li class="multiple"> <strong>多重背景圖</strong> <p>多重背景圖可以是url()或gradient的混合方式</p> </li> </ul> </body> </html>
點擊 "運行實例" 按鈕查看在線實例