CSS 如何创建多个背景图像视差效果

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

语法

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

背景图片属性

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

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

动画属性

CSS动画属性使您能够在HTML元素上创建动画，无需使用JavaScript的帮助。该属性让您能够描述元素在一段给定时间内的修改情况，通过定义一系列关键帧来实现。这些关键帧用于表示元素在不同时间点上的样式，而动画属性决定了元素从一个关键帧到另一个关键帧的过渡方式。

下面简要介绍了动画属性的每个组成部分：

Name - 动画的名称，在@keyframes规则内用于引用。
Duration - 动画的持续时间，以时间字符串值（例如”5s”）表示，用来表示动画应该持续多长时间才能完成。
Timing-function - 动画的速度轨迹，可以通过线性、缓入、缓出、缓入缓出或自定义的cubic-bezier函数进行调整。
Delay - 动画开始之前的延迟时间，以秒为单位（例如”2s”）。
Iteration-count - 动画应该执行的次数，或者使用”infinite”表示动画应该无限循环。
Direction - 动画的轨迹，可以选择”normal”以正常方向开始，”reverse”以相反方向开始，或”alternate”来交替前进和后退。
Fill-mode - 指定动画的非活动状态的处理方式，包括”none”、”forwards”、”backwards”或”both”。
Play-state - 表示动画处于运动状态还是暂停状态，分别用”running”或”paused”来表示。

方法

为了在CSS中利用多个背景图实现视差效果，需要按照以下步骤进行：
为容器元素定义高度和宽度，并将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的灵活性使您能够根据您独特的要求定制设计。因此，为什么不踏上这个旅程，探索设计的潜力，实现卓越的结果呢！