在網頁設計中,背景圖片使用頻率非常高。但是有時候我們可能不希望背景圖片被平鋪,而是希望整張圖片被顯示出來。下面介紹一種方法實現css背景圖片整張顯示。
body { background-image: url("image.jpg"); background-size: cover; }
上面的代碼中,我們將圖片作為背景圖案,指定了圖片的URL地址。接著,我們使用了background-size屬性,指定背景圖片的大小。cover的值可以保證整張圖片被顯示出來并盡可能地填滿背景區域。
還有另外一種方式可以達到同樣的效果,就是使用background-size的contain值。
body { background-image: url("image.jpg"); background-size: contain; background-repeat: no-repeat; background-position: center center; }
上面的代碼中,我們指定了背景圖案的路徑,并使用了background-size: contain屬性,這樣可以確保整張圖片被完整地包含在背景區域內。接著,我們使用了background-repeat屬性,指定該背景圖案不進行平鋪。最后,我們使用了background-position屬性,將該背景圖案放置在背景區域的中心。
需要注意的是,以上兩種方法都可以實現css背景圖片整張顯示,而且可以自適應不同尺寸的背景區域。但是,如果背景圖片比較小,使用cover可能會導致圖片被拉伸,而使用contain則可能導致圖片在背景區域內留有空白。因此,在使用時需要根據實際情況選擇合適的方法。
上一篇css背景圖片拉伸100
下一篇mysql 本周一零點