本教程将向你展示一種使用CSS編寫整頁背景圖像的簡單方法。你還将學習如何使圖像響應用戶的屏幕尺寸。
使背景圖像完全伸展以覆蓋整個浏覽器視口是Web設計中的常見任務。幸運的是，可以使用幾行CSS來完成此任務。
01用圖像覆蓋視口
首先，我們要确保我們的頁面實際上覆蓋了整個視口：
在内部html，我們将使用background-image屬性設置圖像：
02“背景大小”屬性的魔力
神奇的發生在background-size屬性上：
cover告訴浏覽器确保圖像始終覆蓋整個容器，在這種情況下為html。即使浏覽器必須拉伸圖像或從邊緣切掉一點，浏覽器也會覆蓋它。因為浏覽器可能會拉伸圖像，所以您應該使用分辨率足夠高的背景圖像。否則，圖像可能會顯得像素化。如果你想讓所有圖像都出現在背景中，那麼您将要确保圖像的長寬比與屏幕尺寸相比相對接近。
03如何微調圖像位置并避免平鋪
浏覽器還可以選擇将背景圖像顯示為圖塊，具體取決于其大小。為防止這種情況發生，請使用no-repeat：
為了保持美觀，我們将圖像始終居中：
這将始終使圖像水平和垂直居中。
現在，我們生成了一個完全響應的圖像，該圖像将始終覆蓋整個背景：
04滾動時如何固定圖像
現在，以防萬一你想在背景圖像上方添加文本并且該文本溢出當前視口，你可能需要确保當用戶向下滾動以查看文本的其餘部分時圖像保留在背景中：
你可以使用短記号包括上述所有背景屬性：
05可選：如何為移動設備添加媒體查詢
如果要為圖像錦上添花，你可能希望為較小的屏幕添加媒體尺寸：
你可以使用Photoshop或其他圖像編輯軟件來縮小原始圖像的尺寸，以提高移動Internet連接上的頁面加載速度。
因此，既然你知道創建自适應的全頁圖像背景的魔力，那麼現在該創建一些漂亮的網站了！
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
