background-attachment 背景固定

学习

background-attachment 背景固定

2026-02-23/0/ 编辑

background-attachment 背景固定

概念

background-attachment 属性用于设置背景图片的固定方式，控制背景图片是否随页面滚动而滚动。

语法

background-attachment: 值;

属性值

值说明
scroll默认值，背景图片随页面滚动而滚动
fixed背景图片固定，不随页面滚动
local背景图片随元素内容滚动（CSS3）

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-attachment 示例</title>
    <style>
        body {
            height: 2000px;
            margin: 0;
            padding: 20px;
        }

        .box {
            width: 400px;
            height: 400px;
            border: 2px solid #333;
            margin: 20px auto;
            padding: 20px;
        }

        /* scroll 为默认值 */
        .scroll-box {
            background: url(./images/flower.jpg) no-repeat center center;
            background-attachment: scroll;
        }

        .fixed-box {
            background: url(./images/flower.jpg) no-repeat center center;
            background-attachment: fixed;
        }

        .content-section {
            height: 200px;
            background: #f5f5f5;
            margin: 20px 0;
            padding: 20px;
            border-radius: 8px;
        }

        h1, h2 {
            text-align: center;
            color: #333;
        }
    </style>
</head>
<body>
    <h1>background-attachment 背景固定演示</h1>
    <p>向下滚动页面查看不同效果</p>

    <div class="content-section">
        <h2>scroll（默认值）</h2>
        <p>背景图片会随页面滚动而滚动</p>
    </div>

    <div class="box scroll-box">
        <h3>background-attachment: scroll</h3>
        <p>背景图片随页面滚动</p>
    </div>

    <div class="content-section">
        <h2>fixed（固定）</h2>
        <p>背景图片固定不动</p>
    </div>

    <div class="box fixed-box">
        <h3>background-attachment: fixed</h3>
        <p>背景图片固定，不随页面滚动</p>
    </div>

    <div class="content-section">
        <h2>继续滚动</h2>
        <p>观察固定背景的效果</p>
    </div>

    <div class="content-section">
        <h2>更多内容</h2>
        <p>滚动查看固定背景效果</p>
    </div>
</body>
</html>

详细说明

1. scroll（默认值）

背景图片随页面滚动而滚动。这是默认行为。

background-attachment: scroll;

特点：

  • 背景图片随页面滚动
  • 当元素滚动时，背景也滚动
  • 默认值，通常不需要显式设置

使用场景：

  • 普通网页背景
  • 不需要特殊效果的背景

2. fixed

背景图片固定在视口上，不随页面滚动。

background-attachment: fixed;

特点：

  • 背景图片固定不动
  • 即使页面滚动，背景也保持在原位置
  • 创造视差效果

使用场景：

  • 全屏固定背景
  • 视差滚动效果
  • 特殊视觉效果

3. local（CSS3）

背景图片随元素内容滚动而滚动。

background-attachment: local;

特点：

  • 背景图片随元素内容滚动
  • 只在元素有滚动条时有效
  • CSS3 新增属性

使用场景：

  • 元素内容滚动时，背景随之滚动
  • 特殊的视觉效果

实际应用场景

场景 1：全屏固定背景

body {
    margin: 0;
    padding: 0;
    background-image: url(fullscreen-bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    height: 2000px;
}

场景 2：Hero 区域固定背景

.hero-section {
    height: 100vh;
    background-image: url(hero-bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

场景 3：视差滚动效果

.parallax-section {
    height: 500px;
    background-image: url(parallax-bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

场景 4：内容区域滚动

.scroll-content {
    width: 400px;
    height: 300px;
    overflow-y: auto;
    background-image: url(pattern.png);
    background-repeat: repeat;
    background-attachment: local;  /* 背景随内容滚动 */
}

场景 5：结合简写属性

/* 完整简写 */
.fixed-bg {
    background: url(bg.jpg) no-repeat center center / cover fixed;
}

/* 分开写 */
.fixed-bg {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

多张背景图

当有多张背景图时，可以分别为每张图片设置不同的固定方式：

.background {
    background-image: url(bg1.png), url(bg2.png);

    background-attachment:
        fixed,  /* 第一张图片固定 */
        scroll; /* 第二张图片滚动 */
}

与其他属性配合

与 background-size 配合

.fixed-cover {
    background-image: url(bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

与 background-position 配合

.fixed-positioned {
    background-image: url(bg.jpg);
    background-position: center center;
    background-attachment: fixed;
}

简写属性

/* 完整简写 */
background: url(bg.jpg) no-repeat center center / cover fixed;

注意事项

  1. 移动端兼容性：在移动设备上，background-attachment: fixed 可能不被支持或表现不一致
  2. 性能考虑：固定背景可能导致性能问题，特别是在移动设备上
  3. 视差效果：固定背景常用于创建视差滚动效果
  4. 默认值：background-attachment 的默认值是 scroll
  5. 多图时：多张背景图可以有不同的固定方式

浏览器兼容性

属性值ChromeFirefoxSafariIE/Edge
scroll✅ 1.0+✅ 1.0+✅ 1.0+✅ 4.0+
fixed✅ 1.0+✅ 1.0+✅ 1.0+✅ 4.0+
local✅ 1.0+✅ 25.0+✅ 4.0+✅ 9.0+

移动端注意事项

在移动设备上，background-attachment: fixed 可能不被支持。可以考虑以下替代方案：

/* 方案 1：媒体查询 */
@media (min-width: 768px) {
    .fixed-bg {
        background-attachment: fixed;
    }
}

@media (max-width: 767px) {
    .fixed-bg {
        background-attachment: scroll;
    }
}

/* 方案 2：使用 position: fixed */
.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: url(bg.jpg) no-repeat center center / cover;
}

常见问题

Q1: 如何创建全屏固定背景？

body {
    background: url(fullscreen-bg.jpg) no-repeat center center / cover fixed;
    height: 100vh;
    margin: 0;
}

Q2: 为什么移动端固定背景不生效？

A: 移动浏览器可能不支持 background-attachment: fixed，需要使用媒体查询或其他方案。

Q3: 如何创建视差滚动效果？

.parallax {
    height: 500px;
    background: url(bg.jpg) no-repeat center center / cover fixed;
}

最佳实践

/* ✅ 推荐：全屏固定背景 */
body {
    background: url(bg.jpg) no-repeat center center / cover fixed;
}

/* ✅ 推荐：Hero 区域固定背景 */
.hero {
    background: url(hero.jpg) no-repeat center center / cover fixed;
}

/* ✅ 推荐：视差滚动 */
.parallax-section {
    background: url(parallax.jpg) no-repeat center center / cover fixed;
}

/* ✅ 推荐：移动端回退方案 */
@media (max-width: 768px) {
    .fixed-bg {
        background-attachment: scroll;
    }
}

性能优化建议

  1. 图片优化：优化背景图片大小，减少加载时间
  2. 使用 CSS 渐变：考虑使用 CSS 渐变代替大尺寸背景图片
  3. 减少重绘：固定背景可能导致频繁重绘，注意性能
  4. 硬件加速：可以使用 will-change 属性优化性能
.optimized-fixed-bg {
    background: url(bg.jpg) no-repeat center center / cover fixed;
    will-change: transform;
}

学习笔记：background-attachment 控制背景图片的固定方式，fixed 值常用于创建视差滚动效果，但要注意移动端兼容性。

猜你喜欢