CSS中常用的一個屬性就是background-image。通過這個屬性,我們可以很方便地為HTML元素添加背景圖片。
在使用background-image屬性時,我們可以指定一個圖片的路徑。比如說,假如我們有一個叫做“bg.jpg”的圖片,我們可以把它設置成一個div元素的背景圖片,如下所示:
``````
上面這個div的背景就會變成“bg.jpg”這張圖片了。
如果我們希望調整背景圖片的大小,可以使用background-size屬性。這個屬性可以讓我們指定背景圖片的寬度和高度,可以用像素(px)、百分比(%)或其他單位來表示。比如說,我們想把背景圖片的寬度調成500像素,高度調成自適應,可以這樣寫:
``````
其中,auto表示高度會根據圖片的寬度自適應。
另外,如果我們希望把背景圖片居中顯示,可以使用background-position屬性。這個屬性可以讓我們指定背景圖片的位置,可以用像素(px)、百分比(%)或其他單位來表示。比如說,我們想讓圖片水平、垂直都居中,可以這樣寫:
``````
其中,center center表示圖片水平、垂直都居中。
最后,需要注意的是,background-image、background-size、background-position這三個屬性都是可以分別寫在不同的CSS規則中的。比如說,我們可以這樣寫:
``````
這樣,所有具有.bg類的元素都會有同樣的背景圖片效果了。
上一篇css中怎么插入視頻
下一篇css中怎么循環旋轉