如何仅对带Alpha通道的PNG图像可见区域边缘添加滤镜？

方法一：使用CSS drop-shadow 滤镜（最简单） #

drop-shadow 滤镜会跟随图像的Alpha通道生成阴影，只会作用于图像的可见区域边缘，完美匹配需求。

示例代码：

body {
  background: blue;
}

img {
  width: 300px;
  /* 给可见区域边缘添加白色发光效果，参数可自行调整 */
  filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.8));
}

<img src="your-transparent-png.png">

方法二：双层图像叠加实现复杂边缘效果 #

如果需要更复杂的边缘滤镜（比如多层模糊、渐变发光），可以用容器包裹两张相同的图片，底层图片应用滤镜并放大偏移，上层显示原图：

示例代码：

body {
  background: blue;
}

.img-container {
  position: relative;
  width: 300px;
}

.img-container img {
  width: 100%;
  display: block;
}

/* 底层滤镜图层 */
.img-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('your-transparent-png.png') center/contain no-repeat;
  /* 组合滤镜实现复杂边缘效果，参数可自由调整 */
  filter: blur(8px) brightness(1.5) saturate(2);
  /* 放大滤镜图层，让效果只在边缘显现 */
  transform: scale(1.05);
  z-index: -1;
}

<div class="img-container">
  <img src="your-transparent-png.png">
</div>

原方法无效的原因 #

• box-shadow 基于元素的矩形盒模型生成阴影，不会识别图像的透明区域，所以会给整个图片盒子加阴影。
• 直接使用blur滤镜会模糊整个图像（包括透明区域），导致整体模糊，而非仅处理边缘。

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