如何实现仅在内容四周角落显示背景图？

先逐个解答你的疑问： #

• 疑问3：能不能制作背景透明的图片？
  完全可以，你只需要将图片保存为PNG、WebP或者SVG格式，导出时选择保留透明通道即可。这类格式支持alpha透明，能让图片的背景区域完全透明，不会遮挡下方内容。

• 疑问2：必须用图片吗？CSS能不能绘制这类形状？
  不一定非要用图片！很多这类角落装饰效果可以纯CSS实现，举几个常用方法：

  • 用linear-gradient或radial-gradient创建渐变图案，配合background-position和background-size定位到角落；
  • 利用伪元素（:before/:after）+ clip-path裁剪出自定义形状，再填充颜色或渐变；
  • 如果是对称的装饰，还可以用border-image实现角落边框效果。
    比如你提供的示例图里的角落花纹，只要不是特别复杂的不规则图案，基本都能用CSS复刻出来。

• 疑问1：是否需要4张独立的图片？
  如果确定要用图片实现，4张独立的透明图是可行的方案，但也可以把4张图合并成一张雪碧图（CSS Sprite），通过background-position分别显示四个角落，这样能减少HTTP请求数量。当然如果你的布局不允许用大图定位，4张独立图的方式更直接。

具体实现示例 #

方案1：4张独立透明图实现

<div class="content-container">
  <div class="corner top-left"></div>
  <div class="corner top-right"></div>
  <div class="corner bottom-left"></div>
  <div class="corner bottom-right"></div>
  <!-- 你的内容 -->
  <p>这里是你的内容区域</p>
</div>

.content-container {
  position: relative;
  padding: 20px; /* 根据角落图的大小调整内边距，避免内容被遮挡 */
  width: 80%;
  margin: 0 auto;
}
.corner {
  position: absolute;
  width: 50px; /* 角落图的宽度 */
  height: 50px; /* 角落图的高度 */
  background-size: cover;
}
.top-left {
  top: 0;
  left: 0;
  background-image: url('top-left.png');
}
.top-right {
  top: 0;
  right: 0;
  background-image: url('top-right.png');
}
.bottom-left {
  bottom: 0;
  left: 0;
  background-image: url('bottom-left.png');
}
.bottom-right {
  bottom: 0;
  right: 0;
  background-image: url('bottom-right.png');
}

方案2：纯CSS实现（示例：简单的花纹角落）

<div class="content-container">
  <p>这里是你的内容区域</p>
</div>

.content-container {
  position: relative;
  padding: 30px;
  width: 80%;
  margin: 0 auto;
}
.content-container::before,
.content-container::after,
.content-container .corner-bottom-left,
.content-container .corner-bottom-right {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
}
.content-container::before {
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #8b4513 25%, transparent 25%) 0 0,
              linear-gradient(225deg, #8b4513 25%, transparent 25%) 0 0;
  background-size: 20px 20px;
}
.content-container::after {
  top: 0;
  right: 0;
  background: linear-gradient(315deg, #8b4513 25%, transparent 25%) 0 0,
              linear-gradient(45deg, #8b4513 25%, transparent 25%) 0 0;
  background-size: 20px 20px;
}
.content-container .corner-bottom-left {
  bottom: 0;
  left: 0;
  background: linear-gradient(225deg, #8b4513 25%, transparent 25%) 0 0,
              linear-gradient(135deg, #8b4513 25%, transparent 25%) 0 0;
  background-size: 20px 20px;
}
.content-container .corner-bottom-right {
  bottom: 0;
  right: 0;
  background: linear-gradient(45deg, #8b4513 25%, transparent 25%) 0 0,
              linear-gradient(315deg, #8b4513 25%, transparent 25%) 0 0;
  background-size: 20px 20px;
}

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