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

百变鹏仔 4周前 (09-20) #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的帮助。该属性使您能够描述元素在给定时间内的修改过程中的一系列关键帧。这些关键帧用于表示元素在不同时间点的样式，而动画属性则控制元素从一个关键帧到另一个关键帧的过渡方式。

下面是对动画属性的每个组成部分的简明解释 -

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

名称 - 动画的命名法，用于在 @keyframes 规则中引用它。
持续时间 - 动画的持续时间，代表动画应该持续的时间段，以秒为单位，使用时间字符串值（例如"5s"）来表示。
Timing-function − 动画的速度轨迹，可以通过线性、缓入、缓出、缓入缓出或自定义的cubic-bezier函数进行操控。
延迟 − 在启动动画之前的延迟时间，以秒为单位进行测量（例如，"2s"）。
Iteration-count - 动画应执行的迭代计数，或术语“无限”表示动画应继续无限循环。
Direction - 动画的轨迹，可以是“正常”（沿通常方向）、“反向”（沿相反方向）或“备用”交替前进和后退。
填充模式 − 指定满足动画的非操作状态的方法，选项包括"none"、"forwards"、"backwards"或"both"。
Play-state - 表示动画是否处于运动状态或暂停状态，分别用值“运行”或“暂停”表示。
李>

方法

要在CSS中使用多个背景图像产生视差效果，应该按照一系列的指令进行操作 −
提供一个包含环境描绘的组成部分。在当前情况下，该组件是一个带有标签为parallax-container的div。
定义容器元素的高度和宽度，并将overflow属性设置为隐藏。这将确保仅显示图像的可见部分。此外，position 属性设置为relative 以确保背景图像的位置是相对于容器的。
为每个背景图像创建单独的元素，并将它们的位置设置为绝对定位。这样可以精确地在容器元素中定位每个图像。每个元素的高度和宽度都设置为100%，以便填充整个容器。
通过使用background-image属性为每个元素设置背景图像。确保为每个单独的图像提供准确的文件路径。
为每个元素创建一个动画，以沿 X 轴移动背景图像。这是使用动画属性结合 @keyframes 规则来完成的。 TranslateX 属性用于移动元素，您为此属性设置的值决定了元素在水平方向上移动的距离。
为了保持平滑连续的动画体验，animation-timing-function属性被分配了一个linear的值，表示动画在整个过程中保持一致的前进。此外，animation-iteration-count属性被配置为无限值，表示动画无限重复，没有预定义的循环次数限制。

Example

的翻译为：

示例

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

<!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 的灵活性都使您能够定制您的设计，以满足您独特的先决条件。因此，何不踏上这段旅程，探索设计潜力，取得非凡成果！

文章推荐

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

语法

背景图像属性

动画属性

方法

Example

示例

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写