背景图片的居中显示

最新推荐文章于 2024-08-23 10:23:17 发布

kirrin

最新推荐文章于 2024-08-23 10:23:17 发布

阅读量1.6k

点赞数

分类专栏： css 文章标签： firefox 文档 scroll url opera

本文链接：https://blog.youkuaiyun.com/kirrin/article/details/7919207

版权

css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种解决Firefox浏览器中背景图片无法垂直居中的方法。通过设置background-attachment属性为fixed，确保了背景图在Firefox及Opera浏览器中的正确显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇中的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%;