css大背景图相对于浏览器固定，不随着放大缩小改变，不随着浏览器滚动而滚动

最新推荐文章于 2024-08-28 09:53:19 发布

吴大大逛博客

最新推荐文章于 2024-08-28 09:53:19 发布

阅读量1.3k

点赞数

分类专栏： css 文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44524243/article/details/126870269

版权

css 专栏收录该内容

10 篇文章

订阅专栏

这篇内容讲述了如何设置CSS样式，实现背景图片在网页中全屏且固定显示，适应不同设备屏幕大小。主要涉及到的属性包括`background-size`、`background-position`和`background-attachment`，确保背景图在页面中始终覆盖整个视口。

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

标题使用场景：一般用于登录页，或者有大背景图的页面，固定背景图大小

    width: 100%;
    min-height: 100vh;
    background: url(../../static/img/bg.5ce24f3.png) no-repeat 100% 100%;
    background-size: 100% 100%;
    background-position: 50%;
    background-attachment: fixed;
    padding-bottom: 20px;
    overflow: auto;
    background-size: cover;