由于給網(wǎng)頁設置背景圖時,需要設置背景圖不重復且充滿整個瀏覽器屏幕。
給body標簽指定背景圖,這樣背景圖就可以填充整個瀏覽器viewport了。
其實,該方案對所有的塊級容器都可以生效。塊級容器的寬高是動態(tài)的,那么背景圖將自動伸縮,充滿整個容器。
可設置body標簽的CSS樣式如下:
body{
/*加載背景圖*/
background-image:url(./images/background.jpg);
/* 背景圖垂直、水平均居中 */
background-position: center center;
/* 背景圖不平鋪 */
background-repeat: no-repeat;
/* 當內容高度大于圖片高度時,背景圖像的位置相對于viewport固定 */
background-attachment: fixed; //此條屬性必須設置否則可能無效/
/* 讓背景圖基于容器大小伸縮 */
background-size: cover;
/* 設置背景顏色,背景圖加載過程中會顯示背景色 */
background-color: #CCCCCC;
}
或簡寫為如下CSS樣式:
body{
background:url(./images/background.jpg) no-repeat center center;
background-size:cover;
background-attachment:fixed;
background-color:#CCCCCC;
}
聯(lián)系客服