CSS与Bootstrap实现：创建连接多行图片的红色连线

嘿，我来帮你搞定这个连线的问题！根据你的需求，我们可以用绝对定位+SVG的方式实现，完美适配Bootstrap的响应式规则，只在XL屏幕显示。下面是具体步骤和代码修改：

步骤1：添加相对定位容器 #

首先，把你现有的三个row包裹在一个带相对定位的容器里——这样后面放的SVG连线就能基于这个容器定位，不会乱跑。

<!-- 新增的包裹容器 -->
<div class="connection-container position-relative">
  <!-- 你原来的三个row -->
  <div class="row mb-5">
    <div class="col-xl-6">
      <h2>文本内容1</h2>
      <p>这里是第一行的文本描述...</p>
    </div>
    <div class="col-xl-6">
      <img src="你的图片地址1" class="img-fluid" alt="图片1">
    </div>
  </div>

  <div class="row mb-5">
    <div class="col-xl-6">
      <h2>文本内容2</h2>
      <p>这里是第二行的文本描述...</p>
    </div>
    <div class="col-xl-6">
      <img src="你的图片地址2" class="img-fluid" alt="图片2">
    </div>
  </div>

  <div class="row">
    <div class="col-xl-6">
      <h2>文本内容3</h2>
      <p>这里是第三行的文本描述...</p>
    </div>
    <div class="col-xl-6">
      <img src="你的图片地址3" class="img-fluid" alt="图片3">
    </div>
  </div>

  <!-- 接下来在这里插入连线SVG -->
</div>

步骤2：插入并配置SVG连线 #

把你提供的SVG代码直接放到上面的容器里，然后用Bootstrap的响应式类和绝对定位来控制它的显示和位置：

<!-- 红色连线SVG -->
<svg class="d-none d-xl-block position-absolute" viewBox="0 0 1000 600" style="top: 70px; left: 62%; width: 35%; height: auto;">
  <!-- 提取自你提供的SVG的路径代码 -->
  <path d="M10,10 C150,200 350,200 500,10 C650,-180 850,-180 1000,10" stroke="#ff0000" stroke-width="4" fill="none"/>
</svg>

关键参数说明： #

• d-none d-xl-block：Bootstrap自带工具类，直接实现仅XL及以上屏幕显示，小屏幕自动隐藏。
• position-absolute：让SVG脱离文档流，相对于外面的connection-container定位。
• viewBox="0 0 1000 600"：定义SVG的矢量视口，确保缩放时不会变形。
• top和left：用来微调连线位置，你可以根据自己图片的实际位置调整数值（比如top: 70px让连线垂直对齐第一个图片的中间，left: 62%让它靠右对齐图片列）。
• width: 35%：让SVG自适应容器宽度，保证在不同XL屏幕下都能正确缩放。

步骤3：调整连线路径（可选） #

如果默认曲线不对准你的图片，你可以修改<path>里的d属性值：

• 开头的M10,10是连线的起点，对应第一个图片的连接点；
• 中间的Cxxx,xxx xxx,xxx xxx,xxx是贝塞尔曲线的控制点，用来调整弯曲弧度；
• 结尾的1000,10是连线的终点，对应第三个图片的连接点。

你可以用在线SVG编辑器调整路径后，再把新的d值替换进去。

替代方案：用PNG实现（不推荐） #

如果你非要用PNG，也可以把它作为背景图放到绝对定位的元素里，但SVG是矢量图，缩放不会模糊，所以更推荐用SVG：

<div class="d-none d-xl-block position-absolute" style="top: 70px; left: 62%; width: 35%; height: auto; background-image: url('你的PNG地址'); background-size: contain; background-repeat: no-repeat;"></div>

这样就能完美实现你要的效果啦！你可以自己微调top和left的数值，让连线刚好对准图片的对应位置。

内容的提问来源于stack exchange，提问作者IkePr