如何在hero-image模块中正确实现两个自定义SVG异形装饰效果

你现在的两个异形SVG装饰层无法实现预期叠加效果，核心原因是没有给元素设置定位规则，两个块级元素默认上下排列，也没有叠加到hero背景层上，按以下方案调整即可：

第一步：调整HTML结构 #

把两个SVG装饰层放到hero模块的容器内部，结构示例：

<!-- 头部hero容器 -->
<div class="hero-wrap">
  <!-- hero背景图、标题按钮等内容 -->
  <img src="你的hero背景图地址" alt="hero背景" class="hero-bg">
  <div class="hero-content">这里放置标题、按钮等展示内容</div>

  <!-- 两个异形装饰层 -->
  <div class="svg-decor svg-decor-1 overflow-hidden">
    <svg xmlns="http://www.w3.org/2000/svg" width="1920" height="842" viewBox="0 0 1920 842" preserveAspectRatio="xMidYMin meet">
      <path id="Path_4" data-name="Path 4" d="M1920-230V407H769.96L0,612V540Z" transform="translate(0 230)" fill="#252525" opacity="0.7"/>
    </svg>
  </div>
  <div class="svg-decor svg-decor-2 overflow-hidden">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920" height="345" viewBox="0 0 1920 345" preserveAspectRatio="xMidYMin meet">
      <defs>
        <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
          <stop offset="0" stop-color="#c0c0ca"/>
          <stop offset="1" stop-color="#91939a"/>
        </linearGradient>
      </defs>
      <path id="Path_55" data-name="Path 55" d="M0,205,769.964,0H1920V345H0Z" opacity="0.7" fill="url(#linear-gradient)"/>
    </svg>
  </div>
</div>

第二步：添加对应CSS规则 #

/* hero容器基础样式 */
.hero-wrap {
  position: relative;
  width: 100%;
  /* 可根据需求调整hero高度，比如min-height: 80vh */
  min-height: 80vh;
  overflow: hidden;
}
/* 装饰层通用定位 */
.svg-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* 层级规则：比背景高，比文字内容低 */
  z-index: 1;
}
/* 调整两个装饰层层级，渐变层放在深灰色层上方 */
.svg-decor-2 {
  z-index: 2;
}
/* SVG自适应适配 */
.svg-decor svg {
  width: 100%;
  height: auto;
  display: block;
}
/* hero内容层级要高于装饰层 */
.hero-content {
  position: relative;
  z-index: 3;
  /* 自行调整内容的内边距、对齐方式等 */
  padding: 120px 20px;
}
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

可选优化点 #

• 移动端适配时如果异形位置错位，可以给.svg-decor添加transform属性微调，比如transform: translateY(-10%)
• 如果不需要保留SVG原生高度，可以给.svg-decor设置固定高度，同时给SVG加height: 100%，配合preserveAspectRatio属性调整裁切逻辑

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