background-image · 跟老司机学CSS3

**background-image** * 描述：设置对象的背景图像 * 版本：CSS1 | CSS3 该属性在 CSS3 有修改 * 继承性：无 **语法** ``` background-image:图片值; ``` 图片值种类 * none：默认值。不显示背景图像。 * url('URL')：图像的路径。 * inherit：从父元素继承 background-image 属性的设置。 **使用说明** 如果设置了背景图 background-image，默认背景图像位于元素的左上角，并在水平和垂直方向上重复。如果设置了背景图 background-image，推荐同时设置背景颜色 background-color ，当背景图像不可见时，使背景与文本颜色有一定的对比度。 **代码示例** ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>background-image</title> <style> #container{ width: 400px; height: 400px; background-image: url(../img/01.jpg); } </style> </head> <body> <div id="container"> </div> </body> </html> ``` 上面我们使用了相对路径的方式确定图片，也可以使用绝对路径及网络资源的方式网络资源 `background-image: url(https://www.baidu.com/img/bd_logo1.png);` 效果图 ![background-image](https://box.kancloud.cn/7e75753d4d6cb15a9108c5fdcde4a39f_402x405.png)