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

時間 2019-11-25

標籤 div+css div css 控制背景圖片水平垂直居中顯示鋪滿全屏欄目 HTML 简体版

原文原文鏈接

在Web開發中咱們常常要碰到這樣的問題：在爲一個頁面設置背景圖片以後每每但願圖片可以在分辨率比較大的狀況下水平垂直都居中顯示。一般水平居中顯示在Css中是很容易作到的，而垂直居中就須要使用一些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">html

以後在頁面上添加以下css文件設置body的高度爲100%，html元素的設置爲兼容FF：web

}測試

</style>網站

2. 以後須要設置最外層的div元素爲100%高度和寬度：url

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

</div>orm

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

</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模式有效。

==============狀況二===========

一、若是樓主只是將其當作一張圖片顯示，能夠經過css控制，如img{width:100%;height:100%;}. 不然須要將其做爲網頁背景的話能夠試試以下方法： 二、若是這張圖片爲背景圖片因爲背景圖片不具備伸縮性，只能經過別的方法繞着解決，在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> 三、網頁背景圖片默認狀況下是重複平鋪滿整個頁面。上面2方法是要求圖片不重複，但又得佔滿瀏覽器所採用的方法。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

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

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