转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏
Posted 麒麟阁
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了转 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方法是要求图片不重复，但又得占满浏览器所采用的方法。以上是关于转 Div+Css控制背景图片水平垂直居中显示 背景铺满全屏的主要内容，如果未能解决你的问题，请参考以下文章