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)