在Css中,我們通常使用背景圖來裝飾網站頁面。但是,有時候我們會遇到這樣的問題:當瀏覽器窗口大小改變時,背景圖的高度不會自動擴展。這時候,我們需要使用一些技巧來實現背景圖高度拉伸的效果。
/* 實現背景圖高度拉伸的方法 */ body { background: url('bg.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } /* 解釋 */ background-size: cover; 表示背景圖自適應窗口大小,并保持比例不變。 background: url('bg.jpg') no-repeat center center fixed; 表示將背景圖置中固定,不隨窗口滾動。
使用以上方法,我們可以輕松實現背景圖高度拉伸的效果,使得網站頁面看起來更加美觀和舒適。