如何为包裹图片的div添加橙色模糊效果（仅作用于div背景）

不用改动现有HTML，只需要通过CSS给.image-container添加伪元素来实现橙色模糊背景，完全不会影响图片本身：

.image-container {
  position: relative;
  /* 给容器加内边距，让模糊效果能在图片四周显示 */
  padding: 12px;
  /* 让容器宽度随图片自适应，避免占满整行 */
  display: inline-block;
}

.image-container::before {
  content: '';
  position: absolute;
  /* 让伪元素超出容器范围，模糊后形成四周的光晕 */
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  /* 半透明橙色，可根据需求调整颜色和透明度 */
  background: rgba(255, 165, 0, 0.45);
  /* 模糊程度，数值越大效果越明显 */
  filter: blur(10px);
  /* 把伪元素放在图片下方，不遮挡图片 */
  z-index: -1;
}

/* 可选：给图片加一点圆角，和示例效果更贴近 */
.image {
  border-radius: 8px;
}

效果说明： #

• 用::before伪元素生成模糊背景，完全独立于图片，不会对图片本身做任何修改
• 通过调整background的颜色、透明度，以及filter: blur()的数值，可以精准控制橙色模糊的深浅和扩散程度
• padding和伪元素的top/left/right/bottom值配合，能让模糊效果刚好围绕在图片四周

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