能否用CSS实现图片边缘融入渐变背景的淡入/透明效果？

完全可以用CSS实现你想要的边缘模糊/透明融入背景的效果，以下是两种实用方案：

方案一：CSS遮罩（Mask）实现渐变透明边缘 #

这种方式通过渐变遮罩让图片边缘逐步透明，自然衔接背景，适配你的现有容器样式：

假设你的React组件结构如下：

<div style={containerStyle}>
  <img src="你的图片路径" alt="内容描述" style={imageStyle} />
</div>

对应的样式代码：

const containerStyle = {
  position: 'relative',
  background: `linear-gradient(to right, #e0452c, 95%, white), linear-gradient(to top, #e0452c, 95%, white), linear-gradient(to bottom, #e0452c, 95%, white)`,
  backgroundBlendMode: "screen",
  overflow: 'hidden',
};

const imageStyle = {
  width: '100%',
  height: 'auto',
  // 创建四向渐变遮罩，控制边缘透明范围
  maskImage: `linear-gradient(to bottom, black 85%, transparent 100%),
              linear-gradient(to right, black 85%, transparent 100%),
              linear-gradient(to left, black 85%, transparent 100%),
              linear-gradient(to top, black 85%, transparent 100%)`,
  maskComposite: 'intersect',
  // 兼容WebKit内核浏览器
  WebkitMaskImage: `linear-gradient(to bottom, black 85%, transparent 100%),
                    linear-gradient(to right, black 85%, transparent 100%),
                    linear-gradient(to left, black 85%, transparent 100%),
                    linear-gradient(to top, black 85%, transparent 100%)`,
  WebkitMaskComposite: 'intersect',
  // 可选：让图片与背景混合更自然
  mixBlendMode: 'multiply',
};

• 调整渐变中的百分比（如85%到100%）可以控制透明边缘的宽度，数值越小，过渡范围越宽。
• maskComposite: 'intersect'确保四个方向的遮罩只保留重叠区域，即图片中心不透明的部分。

方案二：模糊滤镜+伪元素模拟融合边缘 #

如果需要更贴近Photoshop的模糊虚化边缘效果，可以通过容器伪元素实现：

样式代码：

const containerStyle = {
  position: 'relative',
  background: `linear-gradient(to right, #e0452c, 95%, white), linear-gradient(to top, #e0452c, 95%, white), linear-gradient(to bottom, #e0452c, 95%, white)`,
  backgroundBlendMode: "screen",
  overflow: 'hidden',
};

const imageStyle = {
  width: '100%',
  height: 'auto',
  position: 'relative',
  zIndex: 1,
  // 可选：添加轻微内边距让模糊边缘更自然
  padding: '10px',
  boxSizing: 'border-box',
};

对应的CSS类（React中伪元素需通过CSS类实现）：

.image-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(12px);
  margin: -20px;
  z-index: 0;
}

• 通过filter: blur()控制模糊程度，margin: -20px调整模糊边缘的扩散范围。
• 图片设置z-index: 1确保在模糊层上方显示。

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