在網頁制作中,經常需要為網頁設置底部背景圖片,讓網頁更加美觀。那么怎樣來設置HTML底部圖片呢?下面將介紹一些方法:
//css代碼 body{ margin:0; padding:0; background-image:url(圖片路徑);//圖片路徑需要根據實際情況進行設置 background-size:cover; background-attachment:fixed; background-position:center bottom; }
上述代碼使用CSS的background-image屬性來設置底部圖片。其中,background-size屬性設置圖片的大小,cover表示圖片會縮放以適應整個屏幕;background-attachment屬性在滾動網頁時,使圖片保持固定的位置;background-position屬性設置圖片在底部居中顯示。
如果想要為網頁底部設置統一的背景圖片,可以使用HTML5的新特性--background,代碼如下:
footer{ background:url(圖片路徑) center bottom no-repeat; background-size:cover; }
上述代碼中的footer標簽為網頁底部的標簽,使用background屬性設置圖片的位置和大小,no-repeat表示圖片不重復顯示。通過為footer標簽設置背景圖片,可以實現底部圖片的效果。