Div+Css控制背景圖片水平垂直居中顯示 背景鋪滿全屏


在Web開發中我們經常要碰到這樣的問題:在為一個頁面設置背景圖片之后往往希望圖片能夠在分辨率比較大的情況下水平垂直都居中顯示。通常水平居中顯示在Css中是很容易做到的,而垂直居中就需要使用一些Css的技巧:

1. 首先為了能使得網站能夠根據瀏覽器大小自適應,我們需要將頁面的body元素height值設為100%,而在這之前,我們需要將xhtml驗證從網站頭刪除。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

之后在頁面上添加如下css文件設置body的高度為100%,html元素的設置為兼容FF:

<style type="text/css"> html, body {    margin: 0px;    height: 100%;

}

</style>

2. 之后需要設置最外層的div元素為100%高度和寬度:

<div style="height: 100%; width: 100%; text-align: center;">

</div>

3. 在外層div中再套用一層div並使得其距頁面頂端為50%:

<div style="margin: 0px auto;+position: absolute; top: 50%;">

</div>

4. 接下來將我們需要設置背景圖片的div元素放置在內層div元素中,並設置css屬性如下:

.login_background { height:600px; width:1000px; background-image:url(images/login_background.png); background-repeat:no-repeat; background-position:center center; margin:0px auto; +position:relative; top:-50%; left:-50%; }

這樣頁面的大小將能夠根據瀏覽器的不同自適應,同時背景圖片也能做到垂直和水平居中顯示。

經測試在IE8下F11模式有效。

 

==============情況二===========

1、如果樓主只是將其當做一張圖片顯示,可以通過css控制,如img{width:100%;height:100%;}. 否則需要將其作為網頁背景的話可以試試如下方法: 2、如果這張圖片為背景圖片由於背景圖片不具有伸縮性,只能通過別的方法繞着解決,在ie中可以用<body style="filter:progid:dximagetransform.microsoft.alphaimageloader(src='1.jpg',sizingmethod='scale')">,實現背景拉伸鋪滿整個瀏覽器,但其它的瀏覽器不支持。 這時可以拐個彎,設置兩層div,底層div當做背景使用,放置一張圖片即可。 <div id="background" style="position:absolute;z-index:-1;width:100%;height:100%;top:0px;left:0px;"><img src="1.jpg" width="100%" height="100%"/></div> 再將網頁內容放置到第二層上<div id="content">頁面內容</content> 3、網頁背景圖片默認情況下是重復平鋪滿整個頁面。上面2方法是要求圖片不重復,但又得占滿瀏覽器所采用的方法。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM