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控制背景图片水平垂直居中显示背景铺满全屏