背景图片的居中显示

上一篇中的background-position设置成center后，背景图片在搜狗，chrome可以水平竖直居中显示，但是在firefox中只能水平居中，却无法显示竖直居中。

 

原来是缺少一句代码：background-attachment:fixed;

需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。

background-attachment 属性：如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。可以通过防止这种滚动。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到滚动的影响；background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。（来自w3c教程）

 

 

附上完整代码：

 

background-image: url(../images/loginlogo.png), url(../images/loginbox.jpg), url(../images/loginbg.jpg);
background-attachment:fixed;
background-repeat:no-repeat,no-repeat,no-repeat;
background-position:50% 40%, 50% 60%, 50% 50%;