CSS 实现 SVG 动画背景与内容叠加的专业教程

第一段引用上面的摘要：

本文旨在解决在 CSS 中实现 SVG 动画背景，并在其上方叠加内容（如图片、文本框）的问题。我们将探讨如何使 SVG 动画自适应屏幕宽度而不拉伸内部元素，以及如何利用 CSS 定位技巧将内容精准地放置在 SVG 图形之上，最终实现美观且响应式的页面布局。通过本文提供的两种方法，您可以灵活地控制元素的层叠关系，轻松创建具有吸引力的视觉效果。

SVG 动画背景与内容叠加的实现方法

在网页设计中，使用 SVG 动画作为背景并叠加内容是一种常见的视觉效果。本文将介绍两种实现这种效果的方法：使用 position: absolute 进行定位，以及使用 CSS Grid 进行布局。

方法一：使用 position: absolute 定位

这种方法的核心思想是利用 position: relative 将 SVG 容器设置为定位上下文，然后使用 position: absolute 将需要叠加的内容放置在 SVG 之上。

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

步骤：

1. 创建父容器： 创建一个 div 元素作为父容器，并设置 position: relative。这将作为绝对定位元素的参考。

   .parent {
   position: relative;
   width: 100%; /* 设置宽度 */
   height: 30rem; /* 设置高度 */
   }

2. 添加 SVG 元素： 将 SVG 元素添加到父容器中。为了使 SVG 自适应宽度而不拉伸内部元素，需要正确设置 viewBox 属性，并移除 width 和 height 属性。

   <svg viewBox="0 70 1440 700" xmlns="http://www.w3.org/2000/svg" class="child-one">
   <!-- SVG 内容 -->
   </svg>

   .child-one {
   display: block; /* 确保 SVG 占据整个容器 */
   width: 100%;
   height: auto; /* 保持宽高比 */
   }

3. 添加叠加内容： 将需要叠加的内容（例如文本框、图片）添加到父容器中，并设置 position: absolute。使用 top、left、right、bottom 属性来调整内容的位置。

   <div class="child-two">
   Some text.<br>
   Some more text.<br>
   Etcetera.
   </div>

   .child-two {
   position: absolute;
   top: 20px; /* 调整顶部位置 */
   left: 30px; /* 调整左侧位置 */
   background-color: rgba(255, 255, 255, 0.8); /* 可选：添加背景色 */
   padding: 10px; /* 可选：添加内边距 */
   }

完整代码示例：

<div class="parent">
<svg viewBox="0 70 1440 700" xmlns="http://www.w3.org/2000/svg" class="child-one">
<style>
/* 你的 SVG 动画样式 */
</style>
<path id="circleView" d="M 0,700 C 0,700 0,233 0,233 C 30.97425091062989,218.19027693419207 61.94850182125978,203.3805538683841 109,197 C 156.05149817874022,190.6194461316159 219.18024362559078,192.66806146065565 263,190 C 306.8197563744092,187.33193853934435 331.3305236763771,179.9472002889933 378,200 C 424.6694763236229,220.0527997110067 493.49766166890083,267.5431373833712 546,302 C 598.5023383310992,336.4568626166288 634.6788296480196,357.88025017752193 672,319 C 709.3211703519804,280.11974982247807 747.7870197390207,180.9358619065411 781,174 C 814.2129802609793,167.0641380934589 842.1730913958978,252.3763021963136 893,283 C 943.8269086041022,313.6236978036864 1017.520614677388,289.5589293082046 1066,271 C 1114.479385322612,252.44107069179543 1137.7444498945492,239.38798057086802 1171,244 C 1204.2555501054508,248.61201942913198 1247.5015857444146,270.8891484083234 1294,272 C 1340.4984142555854,273.1108515916766 1390.2492071277927,253.0554257958383 1440,233 C 1440,233 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="#2a304188" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 350)"></path>
<path d="M 0,700 C 0,700 0,466 0,466 C 28.170884988817434,461.7535021842722 56.34176997763487,457.5070043685443 106,472 C 155.65823002236513,486.4929956314557 226.8038050782779,519.7254847100947 280,515 C 333.1961949217221,510.27451528990525 368.4430097092536,467.5910567910766 403,472 C 437.5569902907464,476.4089432089234 471.42415608470765,527.9102881255988 510,514 C 548.5758439152924,500.0897118744012 591.8603659519157,420.76779070652833 644,414 C 696.1396340480843,407.23220929347167 757.1343801076289,473.01854904828775 798,487 C 838.8656198923711,500.98145095171225 859.6021136175689,463.1580131003207 903,430 C 946.3978863824311,396.8419868996793 1012.4571654220952,368.3493985504295 1063,397 C 1113.5428345779048,425.6506014495705 1148.5692246940512,511.44439269796123 1187,521 C 1225.4307753059488,530.5556073020388 1267.2659358016997,463.87303065772534 1310,442 C 1352.7340641983003,420.12696934227466 1396.36703209915,443.0634846711373 1440,466 C 1440,466 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="#2a3041ff" class="transition-all duration-300 ease-in-out delay-150 path-1" transform="rotate(-180 720 350)"></path>
<g transform="translate(800,0)">
<image width="50rem" height="50rem" xlink:href="https://www.freepnglogos.com/uploads/people-png/pin-vito-human-source-people-cutout-33.png" clip-path="url(#circleView)" />
</g>
</svg>
<div class="child-two">
Some text.<br>
Some more text.<br>
Etcetera.
</div>
</div>

.parent {
position: relative;
width: 100%;
height: 30rem;
}
.child-one {
display: block;
width: 100%;
height: auto;
}
.child-two {
position: absolute;
top: 20px;
left: 30px;
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;
}

方法二：使用 CSS Grid 布局

CSS Grid 提供了一种更现代、更灵活的方式来实现元素的层叠。

步骤：

1. 创建父容器： 创建一个 div 元素作为父容器，并设置 display: grid。定义 grid-template-columns 和 grid-template-rows，确保所有子元素占据相同的网格区域。

   .parent {
   display: grid;
   grid-template-columns: 1fr; /* 或者指定宽度，例如 200px */
   grid-template-rows: 30rem; /* 或者指定高度，例如 150px */
   }

2. 添加 SVG 元素和叠加内容： 将 SVG 元素和需要叠加的内容添加到父容器中。

   <div class="parent">
   <svg viewBox="0 70 1440 700" xmlns="http://www.w3.org/2000/svg" class="child-one">
   <!-- SVG 内容 -->
   </svg>
   <div class="child-two">
   Some text.<br>
   Some more text.<br>
   Etcetera.
   </div>
   </div>

3. 设置网格位置： 使用 grid-column 和 grid-row 属性将所有子元素放置在同一个网格单元格中。

   .child-one, .child-two {
   grid-column: 1 / 1;
   grid-row: 1 / 1;
   }

完整代码示例：

<div class="parent">
<svg viewBox="0 70 1440 700" xmlns="http://www.w3.org/2000/svg" class="child-one">
<style>
/* 你的 SVG 动画样式 */
</style>
<path id="circleView" d="M 0,700 C 0,700 0,233 0,233 C 30.97425091062989,218.19027693419207 61.94850182125978,203.3805538683841 109,197 C 156.05149817874022,190.6194461316159 219.18024362559078,192.66806146065565 263,190 C 306.8197563744092,187.33193853934435 331.3305236763771,179.9472002889933 378,200 C 424.6694763236229,220.0527997110067 493.49766166890083,267.5431373833712 546,302 C 598.5023383310992,336.4568626166288 634.6788296480196,357.88025017752193 672,319 C 709.3211703519804,280.11974982247807 747.7870197390207,180.9358619065411 781,174 C 814.2129802609793,167.0641380934589 842.1730913958978,252.3763021963136 893,283 C 943.8269086041022,313.6236978036864 1017.520614677388,289.5589293082046 1066,271 C 1114.479385322612,252.44107069179543 1137.7444498945492,239.38798057086802 1171,244 C 1204.2555501054508,248.61201942913198 1247.5015857444146,270.8891484083234 1294,272 C 1340.4984142555854,273.1108515916766 1390.2492071277927,253.0554257958383 1440,233 C 1440,233 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="#2a304188" class="transition-all duration-300 ease-in-out delay-150 path-0" transform="rotate(-180 720 350)"></path>
<path d="M 0,700 C 0,700 0,466 0,466 C 28.170884988817434,461.7535021842722 56.34176997763487,457.5070043685443 106,472 C 155.65823002236513,486.4929956314557 226.8038050782779,519.7254847100947 280,515 C 333.1961949217221,510.27451528990525 368.4430097092536,467.5910567910766 403,472 C 437.5569902907464,476.4089432089234 471.42415608470765,527.9102881255988 510,514 C 548.5758439152924,500.0897118744012 591.8603659519157,420.76779070652833 644,414 C 696.1396340480843,407.23220929347167 757.1343801076289,473.01854904828775 798,487 C 838.8656198923711,500.98145095171225 859.6021136175689,463.1580131003207 903,430 C 946.3978863824311,396.8419868996793 1012.4571654220952,368.3493985504295 1063,397 C 1113.5428345779048,425.6506014495705 1148.5692246940512,511.44439269796123 1187,521 C 1225.4307753059488,530.5556073020388 1267.2659358016997,463.87303065772534 1310,442 C 1352.7340641983003,420.12696934227466 1396.36703209915,443.0634846711373 1440,466 C 1440,466 1440,700 1440,700 Z" stroke="none" stroke-width="0" fill="#2a3041ff" class="transition-all duration-300 ease-in-out delay-150 path-1" transform="rotate(-180 720 350)"></path>
<g transform="translate(800,0)">
<image width="50rem" height="50rem" xlink:href="https://www.freepnglogos.com/uploads/people-png/pin-vito-human-source-people-cutout-33.png" clip-path="url(#circleView)" />
</g>
</svg>
<div class="child-two">
Some text.<br>
Some more text.<br>
Etcetera.
</div>
</div>

.parent {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 30rem;
}
.child-one, .child-two {
grid-column: 1 / 1;
grid-row: 1 / 1;
}
.child-one {
width: 100%;
height: auto;
}
.child-two {
background-color: rgba(255, 255, 255, 0.8