background-attachment 背景附件

实例代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-attachment 演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }
        
        h1 {
            color: #333;
            text-align: center;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        
        .demo-box {
            height: 300px;
            margin-bottom: 30px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            background-image: url('/uploads/20250507/bg.jpg');
            background-size: cover;
            background-position: center;
            color: white;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
            overflow: auto;
        }
        
        .content {
            height: 600px;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 4px;
        }
        
        /* 默认值，背景随元素滚动 */
        .scroll-example {
            background-attachment: scroll;
        }
        
        /* 背景固定于视口 */
        .fixed-example {
            background-attachment: fixed;
        }
        
        /* 背景随元素内容滚动 */
        .local-example {
            background-attachment: local;
        }
        
        .label {
            background-color: rgba(0, 0, 0, 0.7);
            padding: 5px 10px;
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>background-attachment 属性演示</h1>
        
        <div class="demo-box scroll-example">
            <div class="label">background-attachment: scroll (默认)</div>
            <div class="content">
                <h2>背景随元素滚动</h2>
                <p>这是默认行为。背景图像会随着元素一起滚动。</p>
                <p>滚动此框时，背景图像会与内容一起移动。</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
                <p>Vestibulum auctor dapibus neque. Maecenas sed nisi in arcu semper venenatis. Fusce at libero sed mi vehicula mattis. Integer euismod scelerisque ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
        </div>
        
        <div class="demo-box fixed-example">
            <div class="label">background-attachment: fixed</div>
            <div class="content">
                <h2>背景固定于视口</h2>
                <p>背景图像相对于视口固定，不会随页面或元素滚动。</p>
                <p>滚动此框时，背景图像保持不动，只有内容移动。</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
                <p>Vestibulum auctor dapibus neque. Maecenas sed nisi in arcu semper venenatis. Fusce at libero sed mi vehicula mattis. Integer euismod scelerisque ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
        </div>
        
        <div class="demo-box local-example">
            <div class="label">background-attachment: local</div>
            <div class="content">
                <h2>背景随元素内容滚动</h2>
                <p>背景图像相对于元素内容固定，会随元素内容滚动。</p>
                <p>滚动此框时，背景图像会与内容一起移动，但元素本身不移动时背景也不动。</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus.</p>
                <p>Vestibulum auctor dapibus neque. Maecenas sed nisi in arcu semper venenatis. Fusce at libero sed mi vehicula mattis. Integer euismod scelerisque ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
            </div>
        </div>
    </div>
</body>
</html>