«
»

div+css实现背景图片居中

2014年4月22日, 下午6:05

有时需要在网页中设置一张超大背景图，但考虑到屏幕分辨率的不同，需要做到在各分辨率下能够自动居中并拉升显示。

首先定义一个自动居中，宽度为960px的div层，以这个层为基准来进行偏移控制背景图居中显示。实现div水平居中于浏览器中需要一个条件和一个设置。

一条件：
对body设置居中样式text-align:center，否则在IE中默认以向左对齐。

body{text-align:center}

一设置：
对div层设置居中样式margin:0 auto，表示上下外边距为0，左右边距随浏览器自动，若不设置则在chrome中以向左对齐。

<div style="width: 960px; margin:0 auto; />

这样就可以将div居中显示，并且在其它分辨率下也能居中。

完整代码如下：

<html>
<body style="text-align:center;">
<div style="width: 960px; margin:0 auto; background-color: #000000;">
</div>
</body>
</html>

然后就是添加背景图片了，在之前设置好居中的div中再加一个div，这个div负责控制背景图片的起始位置，若背景图片为1920px，则需要向左偏移(1920-960)/2个像素实现居中，并且需要设置position:relative，否则在IE中只会显示960px的内容，代码如下：

<div style="position:relative; height: 5782px; margin: 0px -480px;" />

添加背景图片

<div style="background: url(test.jpg) no-repeat center 0px; height: 5782px;" />

此时预览会发现有水平滚动条，需要给body加上overflow-x:hidden即可去掉水平滚动条。

若要在背景图层上加其它图片，可以使用position:relative并且设置偏移来显示

<div style="position: relative; margin: 0px 480px; width: 960px;">
<img height="168" width="960" src="a.jpg">
<img height="316" width="958" src="b.jpg">
<img height="553" width="958" src="c.jpg">
</div>

加上背景图片的完整代码如下：

<html>
<body style="text-align:center; overflow-x:hidden;">
<div style="width: 960px; margin:0 auto; background-color: #000000;">
    <div style="position:relative; height: 5782px; margin: 0px -480px;">
        <div style="background: url(test.jpg) no-repeat center 0px; height: 5782px;">
            <div style="position: relative; margin: 0px 480px; width: 960px;">
                <img height="168" width="960" src="a.jpg">
                <img height="168" width="960" src="b.jpg">
                <img height="168" width="960" src="c.jpg">
            </div>
        </div>
    </div>
</div>
</body>
</html>
Category: 建站

Comments are closed.