background-image · CSS基礎

## background-image屬性 background-image屬性設置一個元素的背景圖像。元素的背景是元素的總大小，包括填充和邊界（但不包括邊距）。默認情況下，background-image放置在元素的左上角，并重復垂直和水平方向。 JavaScript 語法:object object.style.backgroundImage="url(stars.gif)" ## 屬性值 | 值 | 說明 | | :-- | :-- | | url(*'URL'*) | 圖像的URL | | none | 無圖像背景會顯示。這是默認 | | inherit | 指定背景圖像應該從父元素繼承 | **實例1** ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>W3Cschool教程(w3cschool.cn)</title> <style> body { background-image:url('https://7n.w3cschool.cn/attachments/knowledge/201611/31824.png'); background-color:#cccccc; } </style> </head> <body> <h1>Hello World!</h1> </body> </html> ``` **實例2--多個背景圖片** ``` <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>Multiple backgrounds</title> <style> .test{ height:300px; background:url(/statics/images/w3c/ct_beatles.jpg) no-repeat scroll 10px 20px,url(/statics/images/w3c/ct_beatles.jpg) no-repeat scroll 50px 60px,url(/statics/images/w3c/ct_beatles.jpg) no-repeat scroll 90px 100px; background-origin:content-box; background-clip:padding-box; background-size:100px 120px; } </style> </head> <body> <div class="test">定義多重背景圖像</div> </body> </html> ```