CSS设置div双背景图时如何避免图片撑大元素宽高

装饰图撑大容器的本质是图片内容溢出容器边界导致的，下面两种实现方式都可以完全不改动div预设宽高，按需选择即可。

方案1：直接用CSS多背景（推荐，无冗余标签） #

不需要单独加div放img，直接给目标容器设置多重背景属性即可，天生不会影响容器尺寸：

.body {
  position: absolute;
  top: 0;
  background-color: #1799A7;
  /* 两张背景图按顺序加载，前者在上层后者在下层 */
  background-image: url("images/bg-pattern-top.svg"), url("images/bg-pattern-bottom.svg");
  /* 分别定位到左上角、右下角，可按需加偏移值比如left -400px top -400px调整位置 */
  background-position: left top, right bottom;
  /* 禁止背景平铺 */
  background-repeat: no-repeat;
  width: 100%;
  height: 720px;
  /* 兜底裁切所有溢出容器的内容，彻底避免影响外部布局 */
  overflow: hidden;
}

对应HTML可以删掉两个多余的装饰图容器，结构更简洁：

<div class="body">
  <!-- 直接放页面业务内容即可 -->
</div>

方案2：保留原有img标签结构的改法 #

如果你需要单独控制图片的动画、交互等必须保留img标签，只需要修改几个CSS属性即可：

1. 给父容器加overflow: hidden裁切溢出内容，从根源避免图片撑大容器
2. 把原来用margin做的偏移改成top/left/right/bottom定位属性控制，避免绝对定位元素的布局计算偏差
3. 给装饰图设置低层级，避免遮挡正常业务内容

修改后的完整CSS：

.body {
  position: absolute;
  top: 0;
  background-color: #1799A7;
  width: 100%;
  height: 720px;
  /* 新增：裁切所有超出容器边界的内容 */
  overflow: hidden;
}

.bg-top {
  position: absolute;
  /* 替换margin偏移，位置按需调整即可 */
  top: -400px;
  left: -400px;
  /* 放在最底层，不遮挡正常内容 */
  z-index: 0;
}

.bg-bottom {
  position: absolute;
  /* 替换margin偏移，位置按需调整即可 */
  bottom: 0;
  right: 0;
  /* 放在最底层，不遮挡正常内容 */
  z-index: 0;
}

/* 给业务内容提层级，避免被装饰图覆盖 */
.body > *:not(.bg-top):not(.bg-bottom) {
  position: relative;
  z-index: 1;
}

HTML结构不需要改动，直接用原有代码即可。

补充：如果需要调整装饰图的显示大小，方案1直接加background-size属性控制即可，方案2直接给img标签设宽高就行，两种方式都不会改动父容器预设的100%宽度、720px高度。

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