SVG背景图适配80%宽度元素失效、显示断裂及定位需求求助

我尝试将SVG设置为背景图，放入宽度约为屏幕80%的元素中，预期效果为SVG作为底部背景完整展示在元素区域内。但当前遇到两个问题：

• 元素宽度设为80%时，SVG背景完全不显示
• 缩小元素宽度后，SVG能显示但出现断裂

我需要让SVG在80%宽度的元素里正常显示，并定位在元素底部。

现有代码 #

HTML代码 #

<div>
  
  <h1>SVG in the background</h1>
<p>Lorem and Hip Hip Hip Lorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip HipLorem and Hip Hip Hip</p>  
</a>

</div>

CSS代码 #

body {
  background: #e18900;
  padding: 5%;
}


div{
  position: relative;
  width: 80%;
  padding:5%;
  background: url("你的SVG文件路径") center;
  background-size: 100%;
}

解决方案 #

1. 修复HTML结构问题 #

现有HTML中存在多余的</a>标签（无对应起始<a>标签），删除该无效标签，避免结构错误影响样式渲染。

2. 调整CSS背景属性 #

修改div的背景相关属性，解决显示异常和定位需求：

body {
  background: #e18900;
  padding: 5%;
}

div{
  position: relative;
  width: 80%;
  padding:5%;
  /* 将背景定位到元素底部居中，禁止重复平铺 */
  background: url("你的SVG文件路径") bottom center no-repeat;
  /* 宽度适配元素宽度，高度自动按SVG原始比例缩放，防止变形断裂 */
  background-size: 100% auto;
  /* 设置最小高度，确保元素有足够空间容纳SVG背景，避免因内容高度不足导致背景不显示 */
  min-height: 160px;
}

修改说明 #

• 添加no-repeat：防止SVG重复平铺，避免出现断裂效果
• 背景位置改为bottom center：让SVG固定在元素底部居中，符合需求
• background-size设为100% auto：宽度适配元素，高度自动保持比例，避免SVG拉伸变形
• 添加min-height：确保元素高度足够显示SVG，解决元素宽度80%时背景不显示的问题

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