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> ```