css如何設置全屏背景圖片
- 網頁設計
- 關注:1.28W次
導語:網頁背景設置倒不是很難,但是要全屏可控制呢?你還覺得容易嗎?以下的是本站小編為大家蒐集的用css設置全屏背景圖片的實例,希望對你有所幫助。
如果你有一張比較絢爛的圖片想做背景,可以這樣設置:
代碼如下:
body{
background:url(img.jpg);
background-position:center;
background-repeat:no-repeat;
}
但效果很可能會是這樣:
圖片沒有重疊,居中,並且...她太小了,無法佔領全部的頁面。
很可惜,CSS2中並沒有圖片全屏拉伸的屬性,所以我自己想了個辦法。
利用一個p層,在裏面裝載一個IMG標籤。然後設置p和IMG的大小為100%,並固定到屏幕最底層,這樣就實現了完美的拉伸並最大化圖片的.目的。
首先在Body中加入下面的代碼:
代碼如下:
<p id="p1"><img src="img.jpg" /></p>
然後加入CSS代碼:
p#p1{
position:fixed;
top:0;
left:0;
bottom:0;
right:0;
z-index:-1;
}
p#p1 > img {
height:100%;
width:100%;
border:0;
}
最終效果:
拉伸瀏覽器、調整網頁位置後,圖片背景圖片依然居中全屏:
火狐狸中的效果:
- 文章版權屬於文章作者所有,轉載請註明 https://xuezhezhai.com/zh-hk/sjzz/sjzz/4x1x1n.html