如何响应式在Div角落放置透明装饰图？现有方案不够优雅

方案一：CSS多背景图（简洁首选） #

直接利用CSS多背景特性，无需额外DOM元素即可实现响应式布局：

.first-div {
  /* 预留内边距，避免装饰图覆盖页面内容 */
  padding: 2rem;
  /* 逗号分隔两张背景图地址 */
  background-image: url('右上角透明图地址'), url('左下角透明图地址');
  /* 分别指定两张图的位置：右上角、左下角 */
  background-position: top right, bottom left;
  /* 用百分比设置尺寸，自动适配不同屏幕；也可设为contain或固定像素 */
  background-size: 15% auto;
  background-repeat: no-repeat;
}

• 优势：代码简洁，无额外DOM开销
• 调整建议：background-size的百分比可根据设计需求修改，确保装饰图在不同屏幕下比例协调

方案二：绝对定位img元素（灵活可控） #

如果需要单独控制每张图的交互、动画或复杂样式，推荐用绝对定位的img标签：

HTML结构

<div class="first-div">
  <!-- 页面主体内容 -->
  <img src="右上角透明图地址" alt="右上角装饰" class="corner-img top-right">
  <img src="左下角透明图地址" alt="左下角装饰" class="corner-img bottom-left">
</div>

CSS样式

.first-div {
  position: relative; /* 为子元素绝对定位提供参考容器 */
  padding: 2rem; /* 防止内容被装饰图遮挡 */
}

.corner-img {
  position: absolute;
  max-width: 15%; /* 响应式缩放，适配不同屏幕尺寸 */
  pointer-events: none; /* 可选，避免装饰图干扰下方内容的点击交互 */
}

.top-right {
  top: 0;
  right: 0;
}

.bottom-left {
  bottom: 0;
  left: 0;
}

原实现的问题说明 #

你之前用background-position: 1300px -1000px属于固定像素定位，仅在特定屏幕尺寸下生效，窗口缩放或切换设备时，装饰图会偏离角落，完全不具备响应式能力。而上面两种方案通过关键字定位（top right）或百分比尺寸，能自动贴合容器边角，适配各种屏幕。

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