不少同學在設置網站背景圖片時會遇到這么一個問題：背景圖片總是不能鋪滿整個屏幕，不是圖片太小就是圖片被過度放大，顯得不太美觀。那么 CSS 怎么設置背景圖片自適應全屏呢？這篇文章告訴你。

實現效果：

源碼：

CSS設置背景圖片自適應 - 編程獅(w3cschool.cn)

body{

position:fixed;

top: 0;

left: 0;

width:100%;

height:100%;

min-width: 1000px;

background: url(./image/img1.png);/*圖片路徑*/

background-repeat: no-repeat;

background-size: cover;

-webkit-background-size: cover;

-o-background-size: cover;

background-position: center 0;

}

實現原理：

首先固定背景圖片在屏幕的最上方和最左方。其次將 height 和 width 的值都設置為 100%，還需要設置 min-width，這是為了實現屏幕寬度在 1000px 以內時保持圖片大小不變。最后還需要設置背景圖片不重復(no-repeat)。

以上就是文章“CSS 怎么設置背景圖片自適應全屏？附源碼！”的全部內容。想要了解更多 CSS 資料請關注w3cschool。

總結

以上是生活随笔為你收集整理的用css使用html设置背景图片自适应,CSS怎么设置背景图片自适应全屏？附源码！...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。