纯CSS实现文章内容滚动覆盖固定背景的视差效果-html教程-PHP中文网

纯CSS实现文章内容滚动覆盖固定背景的视差效果

聖光之護

发布： 2025-09-10 11:36:21

原创

631人浏览过

纯CSS实现文章内容滚动覆盖固定背景的视差效果

本教程详细阐述如何利用纯CSS实现文章内容滚动时，背景图像保持固定，内容区域从页面中部向上滑动覆盖背景的视觉效果。通过巧妙结合background-attachment: fixed和可滚动容器，无需JavaScript即可创建流畅且高性能的交互式文章布局。

在现代网页设计中，为文章页面添加引人入胜的视觉效果已成为提升用户体验的关键。其中一种流行的设计模式是，当用户向下滚动页面时，文章主体内容从页面中部向上滑动，逐渐覆盖一个固定不动的背景图片，从而营造出一种视差（parallax）或沉浸式阅读的体验。虽然这种效果可以通过javascript监听滚动事件来实现，但纯css方案往往能提供更优的性能和更简洁的代码。

核心概念：CSS固定背景与可滚动容器

实现此效果的核心在于两个关键CSS特性：

background-attachment: fixed;: 这个属性使得元素的背景图像相对于视口（viewport）固定。这意味着当元素本身或其父容器滚动时，背景图像不会随之滚动，而是保持在屏幕上的固定位置。
可滚动容器: 创建一个占据整个视口高度并允许垂直滚动的容器。文章内容将放置在此容器内，并利用其自身的滚动机制来展现。

通过将一个带有fixed背景的容器设置为页面的主滚动区域，并将文章内容初始定位在视口中间，我们便能巧妙地实现内容向上滚动覆盖固定背景的效果。

实现步骤

我们将通过一个具体的文章页面示例来演示如何构建这种布局。

1. HTML 结构

首先，定义页面的基本HTML结构。main元素将作为我们的主滚动容器，其中包含一个用于包裹所有文章内容的div.articles，以及一个或多个div.article-container来展示具体的文章内容。

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动覆盖固定背景文章页</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <main>
        <div class="articles">
            <div class="article-container">
                <h1>文章标题一</h1>
                <div class="date">2023年10月27日</div>
                <div class="article-description">这是文章的简要描述，引人入胜。</div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
            <div class="article-container">
                <h1>文章标题二</h1>
                <div class="date">2023年10月27日</div>
                <div class="article-description">这是第二篇文章的简要描述。</div>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages.</p>
            </div>
        </div>
    </main>
</body>
</html>

登录后复制

2. CSS 样式

接下来是关键的CSS样式，它将实现我们所需的效果。

body {
    margin: 0; /* 移除默认的body外边距 */
    overflow: hidden; /* 防止body自身滚动，将滚动行为委托给main元素 */
}

main {
    display: flex;
    flex-direction: column;
    /* 设置背景图片，并使用 fixed 实现固定效果 */
    background: url("https://source.unsplash.com/iuyR_HEwk24/1600x900") no-repeat center fixed;
    background-size: cover; /* 确保背景图片覆盖整个容器 */
    height: 100vh; /* main元素占据整个视口高度 */
    overflow-y: overlay; /* 允许main元素垂直滚动。overlay在支持时不会占用滚动条空间 */
    /* 注意：对于不支持 overlay 的浏览器，会回退到 scroll */
}

.articles {
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中文章容器 */
    justify-content: center; /* 垂直居中（如果内容不够长） */
    width: 100%;
    margin-top: 50vh; /* 初始时将文章内容推到视口中间，使其从下方出现 */
}

.article-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 15px;
    width: 45vw; /* 控制文章内容宽度 */
    padding: 30px;
    color: #1a2434;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 15px;
    /* 确保内容足够长，以便触发滚动效果 */
    line-height: 1.6;
}

.article-container h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    text-align: center;
}

.article-container .date {
    font-size: 0.9rem;
    color: rgba(0, 0, 0, 0.6);
    margin-bottom: 20px;
}

.article-container .article-description {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 20px;
    text-align: center;
}

.article-container p {
    font-size: 1rem;
    text-align: justify;
}

/* 为最后一个文章容器增加底部外边距，确保滚动到底部时有足够的空间 */
.article-container:last-child {
    margin-bottom: 30px;
}

登录后复制

代码解析

body { margin: 0; overflow: hidden; }: 这一步至关重要。margin: 0清除了浏览器默认的body外边距。overflow: hidden则阻止了body元素产生滚动条，确保整个页面的滚动行为由main元素来控制。
main 元素:
- height: 100vh;:

以上就是纯CSS实现文章内容滚动覆盖固定背景的视差效果的详细内容，更多请关注php中文网其它相关文章！