css背景图固定不随滚动条滚动

CSS背景图固定不随滚动条滚动

基础概念

CSS中的background-attachment属性用于设置背景图像是否随页面滚动。当设置为fixed时，背景图像会相对于视口（viewport）固定，而不是相对于元素本身。这意味着即使页面滚动，背景图像也会保持在相同的位置。

类型

scroll：默认值，背景图像随页面滚动。
fixed：背景图像相对于视口固定。
local：背景图像相对于元素本身滚动。

应用场景

全屏背景：在网站的全屏页面上使用固定背景图，可以营造出沉浸式的氛围。
导航栏背景：在导航栏上使用固定背景图，可以确保导航栏在任何滚动位置都清晰可见。
特殊效果：在某些需要特殊视觉效果的页面上，如欢迎页、介绍页等，可以使用固定背景图。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Background Image</title>
    <style>
        body {
            margin: 0;
            height: 2000px; /* 确保页面有足够的滚动空间 */
        }
        .fixed-bg {
            background-image: url('https://example.com/image.jpg');
            background-attachment: fixed;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            height: 100vh; /* 视口高度 */
        }
    </style>
</head>
<body>
    <div class="fixed-bg"></div>
    <p>滚动页面，背景图不会移动。</p>
</body>
</html>