CSS中的背景圖片通常是用來裝飾網頁的,但很多時候我們需要讓圖片填滿整個背景,這就需要使用背景圖片縱向拉伸的技巧。接下來我們通過代碼演示來說明這個過程。
body { background-image: url('bg.jpg'); background-repeat: repeat-y; background-size: 100% auto; }
首先,我們需要在body元素中設置背景圖片,并把背景重復模式指定為repeat-y。這樣圖片就會在垂直方向上重復填充整個背景。
接著,我們需要使用background-size屬性來指定背景圖片的大小。將屬性值的第一個參數設置為100%,就可以讓圖片在水平方向上鋪滿整個背景。而將第二個參數設置為auto,就可以讓圖片在縱向方向上按照原有的比例縮放,保證圖片不失真。
通過以上的設置,我們就可以輕松實現背景圖片在縱向方向上拉伸,讓其填滿整個背景。如果想讓圖片在橫向方向上拉伸,只需要把background-size屬性的第一個參數設置為auto,第二個參數設置為100%即可。
上一篇css默認打開方式錯誤
下一篇css默認顯示兩行多余