如何在 CSS 中创建多背景图像视差?

cssweb developmentfront end technology更新于 2024/3/19 19:56:17

视差滚动是一种常用的设计技巧，可以为网页增添动感和深度。它通过以不同的速度移动不同的页面元素来模拟平面上的深度效果。实现此技巧的一种独特而富有想象力的方法是在 CSS 中使用多张背景图像。在本文中，我们将探讨如何在 CSS 中创建多背景图像视差效果，包括设置 HTML 结构和创建所需效果所需的 CSS 样式的步骤。无论您是初学者还是经验丰富的前端开发人员，本指南都将为您提供在网站上创建令人惊叹的多背景图像视差效果所需的知识和工具。

语法

element {
   background-image: url(image-location.jpg);
}

background-image 属性

CSS 中的 background-image 属性用于指定一个或多个用作 HTML 元素背景的图片。这允许将一个或多个图片合并为元素的背景。图片可以位于元素的特定区域，可以设置为水平或垂直复制，也可以调整大小以覆盖整个元素或仅覆盖元素的一小部分。

element {
   animation: name duration timing-function delay iteration-count direction fill-mode play-state;
}

动画属性

CSS 动画属性赋予了在无需 JavaScript 帮助的情况下在 HTML 元素上创建动画的能力。此属性使您能够创建一系列关键帧来描述元素在给定时间段内的修改。这些关键帧用于表示元素在不同时间点的样式，而动画属性则控制元素从一个关键帧前进到另一个关键帧的方法。

以下是动画属性每个组成部分的简要说明 -

名称 - 动画的名称，用于在 @keyframes 规则中引用动画。
持续时间 - 动画的持续时间，表示动画完成所需持续的时间，以秒为单位，使用时间字符串值(例如"5s")。
时间函数 - 动画的速度轨迹，可以调整为遵循线性、缓动、缓入、缓出、缓入缓出或自定义三次贝塞尔曲线函数。
延迟 − 触发动画之前的延迟时间，以秒为单位(例如"2 秒")。
迭代次数 − 动画应执行的迭代次数，或使用术语"无限"表示动画应无限循环。
方向 − 动画的轨迹，可以是"正常"表示沿正常方向行进，"反向"表示沿相反方向行进，"交替"表示交替前进和后退。
填充模式 − 指定满足动画非运行状态的方法，选项包括"无"、"前进"、"后退"或"both"。
播放状态 − 表示动画处于运动状态还是暂停状态，分别以"正在运行"或"已暂停"为特征。

方法

要在 CSS 中实现具有多个背景图片的视差效果，应遵循以下说明 -
提供一个包含环境描绘的组件。在当前实例中，该组件是一个标记为 parallax-container 的 div。
定义容器元素的高度和宽度，并将 overflow 属性设置为 hidden。这将确保仅显示图像的可见部分。此外，将position属性设置为relative，以确保背景图片的位置相对于容器。
为每个背景图片创建单独的元素，并将其位置设置为absolute。这允许您在容器元素内精确定位每个图片。每个元素的高度和宽度均设置为 100%，以填充整个容器。
利用 background-image 属性为每个元素设置背景图像。请确保为每张图片提供准确的文件路径。
为每个元素创建一个动画，使背景图像沿 X 轴移动。这可以通过结合使用 animation 属性和 @keyframes 规则来实现。translateX 属性用于移动元素，您为此属性设置的值决定了元素在水平方向上移动的距离。
为了保持流畅连续的动画体验，animation-timing-function 属性被分配了一个 linear 值，表示动画始终保持一致的推进速度。此外，animation-iteration-count 属性配置为无限值，表示动画不断重复，循环次数没有预定义限制。

示例

以下是我们将在本例中查看的完整代码 -

<!DOCTYPE html>
<html>
<head>
   <title>How to create multiple background image parallax in CSS?</title>
   <style>
      .parallax-container {
         height: 200px;
         width: 100%;
         overflow: hidden;
         position: relative;
      }
      .layer-1,
      .layer-2,
      .layer-3 {
         background-position: center;
         background-size: cover;
         position: absolute;
         height: 200px;
         width: 100%;
      }
      .layer-1 {
         background-image: linear-gradient(red,orange);
         animation: move-layer-1 15s linear infinite;
      }
      .layer-2 {
         background-image: linear-gradient(blue,lightblue);
         animation: move-layer-2 20s linear infinite;
      }
      .layer-3 {
         background-image: linear-gradient(green,lightgreen);
         animation: move-layer-3 25s linear infinite;
      }
      @keyframes move-layer-1 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-30%);
         }
      }
      @keyframes move-layer-2 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-60%);
         }
      }
      @keyframes move-layer-3 {
         0% {
            transform: translateX(0);
         }
         100% {
            transform: translateX(-90%);
         }
      }
   </style>
</head>
<body>
   <h4>How to create multiple background image parallax in CSS?</h4>
   <div class="parallax-container">
      <div class="layer-1"></div>
      <div class="layer-2"></div>
      <div class="layer-3"></div>
   </div>
</body>
</html>

结论

总而言之，使用 CSS 制作多层背景图像视差效果是一种简单而强大的技术，可以为您的网站增添维度和动画效果。遵循本文所述的指导，您可以为浏览者创造令人愉悦、引人入胜的体验，并使其久久难忘。无论您的设计愿景是简单还是复杂，CSS 的灵活性都能让您根据自身的独特需求定制设计。因此，何不踏上这段旅程，探索设计潜力，获得非凡成果!