在web開發中,經常需要使用背景圖來美化網頁。但是,我們經常會遇到一種情況,就是背景圖不能完整填充整個區域,或者背景圖拉伸導致失真。這時候,我們可以使用CSS來解決這個問題。
首先,如果需要完整填充整個區域,我們可以使用以下代碼:
background-image: url(image.jpg); background-size: cover;
這里,我們使用background-size屬性來設置背景圖的大小。cover選項表示將背景圖完整地覆蓋住整個區域。這樣,無論區域大小如何,背景圖都可以完整地填充整個區域。
如果需要拉伸背景圖,可以使用以下代碼:
background-image: url(image.jpg); background-size: 100% 100%;
這里,我們使用background-size屬性來設置背景圖的大小。其中,100% 100%表示將背景圖沿著水平和垂直方向都拉伸到與區域大小一致。這樣,雖然會出現拉伸失真的情況,但是背景圖可以完整地填充整個區域。
上一篇css背景圖居中代碼
下一篇css默認選項設置