在CSS中,我們可以使用background-image屬性來為網頁設置背景圖片。
在這里我們可以使用url()函數來引入圖片,并通過background-repeat屬性來控制背景圖片是否重復。比如說,如果想要圖片不重復顯示,我們可以設置為:
body{ background-image: url("img/bg.jpg"); background-repeat: no-repeat; }
而當我們需要調整圖片大小的時候,我們可以使用background-size屬性來設定。
其參數有三種情況:
- length:固定長度
- percentage:百分比
- cover或contain
其中,cover會拉伸圖片以完全覆蓋容器,可能會出現超出容器范圍的情況;而contain會保持原圖長寬比,拉伸圖片以適應容器,可能會出現背景顏色填充的情況。
代碼示例:
body{ background-image: url("img/bg.jpg"); background-repeat: no-repeat; background-size: cover; }
這樣,我們就可以輕松地設置背景圖片并調整圖片大小了。