如何让CSS设置的h2背景图完整显示并定位到左下角？

问题原因说明 #

• 背景图被裁切：CSS背景默认仅在元素的盒模型范围内渲染，当h2的实际宽高小于你设置的300px背景图尺寸时，超出盒子的部分就会被裁切
• 设置background-position: left bottom后图片消失：h2的高度默认仅由内部文字撑开，远小于300px，当背景图底部和h2底部对齐时，300px高的图片大部分区域都在h2盒子外，就会看起来完全消失

纯CSS解决方案 #

方案1：简单适配（适合允许调整h2高度的场景）

不需要加大量上下内边距，仅需设置最小高度匹配背景图尺寸即可：

h2 {
  /* 原有基础配置 */
  background-image: url('你的图片路径.png');
  background-size: 300px;
  background-repeat: no-repeat;
  /* 修正配置 */
  background-position: left bottom;
  /* 最小高度和背景图高度一致，避免上下裁切 */
  min-height: 300px;
  /* 仅需左侧加内边距，避免文字覆盖背景图，不需要上下加多余内边距 */
  padding-left: 320px;
  /* 可选：如果需要文字垂直居中，设置行高和min-height一致即可 */
  line-height: 300px;
}

方案2：灵活适配（不改动h2原有布局）

使用伪元素独立渲染背景图，完全不影响h2本身的文字排版：

h2 {
  position: relative;
  /* 左侧预留背景图展示空间 */
  padding-left: 320px;
}

h2::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 300px;
  background-image: url('你的图片路径.png');
  background-size: contain;
  background-repeat: no-repeat;
  /* 替换为你的背景图实际宽高比，无需手动固定高度 */
  aspect-ratio: 2/1;
}

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