如何让SVG遮罩与底层Banner图片尺寸匹配并响应式缩放

我想要在Banner图片上叠加一个SVG遮罩，该SVG包含左右两侧的品牌色斜条纹，中间区域为透明。我使用:after伪元素实现叠加，但SVG的右侧宽度和整体高度均超出Banner图片，这可能与其自身width: 1280px、height: 720px的尺寸有关。我原以为设置position: absolute后，SVG会继承Banner图片的尺寸，但实际并未生效。请问如何让SVG遮罩完全覆盖Banner图片并实现响应式缩放？

1. 给父容器添加定位上下文 #

position: absolute的元素会相对于最近的非static定位父元素定位，因此需要给.banner-img添加position: relative，让伪元素以它为基准定位，避免出现偏移或尺寸超出的问题。

2. 优化SVG的响应式支持 #

原SVG的固定宽高会导致缩放比例失调，修改SVG属性使其自适应容器尺寸：

• 移除SVG的width和height属性，添加viewBox="0 0 1280 720"，确保SVG能根据容器尺寸等比例缩放，同时保留原有图形比例。
• 删除SVG中冗余的clipPath和空<g>元素，简化代码结构。

3. 调整背景缩放规则 #

将background-size: cover改为background-size: 100% 100%，确保SVG完全覆盖父容器；如果需要保持SVG比例不拉伸，可保留cover，但需确保Banner图片的比例与SVG的viewBox比例（16:9）一致。

修改后的完整代码 #

CSS #

.img-wrapper-overflow-hidden {
  overflow: hidden;
}

.banner-img {
  position: relative; /* 添加定位上下文 */
}

.banner-img img {
  width: 100%;
}

.banner-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0; /* 确保从左上角开始定位 */
  background-size: 100% 100%; /* 完全覆盖容器，或用cover保持比例 */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1280 720' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' width='1280' height='720' fill='%23FFFFFF' fill-opacity='0' /%3E%3Cpath d='M0 634 0 0 182 634Z' fill='%23FFF578' fill-rule='evenodd' transform='matrix(1 -1.22465e-16 -1.22465e-16 -1 3.66662e-14 633)' /%3E%3Cpath d='M0 723 0 0 207 723Z' fill='%23FFCB05' fill-rule='evenodd' transform='matrix(-1 0 0 1 1280 -3)' /%3E%3Cpath d='M0 340 0 0 97 340Z' fill='%23FAA61A' fill-rule='evenodd' transform='matrix(-1 0 0 1 1280 380)' /%3E%3C/svg%3E");
}

HTML #

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-12 banner-img">
      <div class="img-wrapper-overflow-hidden">
        <img src="https://source.unsplash.com/collection/345744/1440x520" alt="" title="">
      </div>
    </div>
    <div class="col-sm-10 offset-sm-1" role="main">
      <h1>Some Title</h1>
      <p>Lorem ipsum dolor sit amet. Hic nobis ipsum aut fugiat molestiae est impedit officia At perferendis quisquam est illo molestiae cum minus corrupti. Ab numquam corporis qui corporis temporibus in numquam deleniti. Ut maxime expedita quo facilis unde aut earum eaque non sunt porro ut ipsa blanditiis</p>
    </div>
  </div>
</div>

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