如何使用CSS为图片添加radial gradient实现向背景色透明过渡

filter属性本身不支持按径向规则控制元素透明度，无法实现你要的边缘渐隐融背景效果，可选择以下两种成熟方案实现：

方案1：CSS mask遮罩实现（推荐，无额外冗余DOM） #

原理是给图片叠加径向渐变作为透明度遮罩，遮罩黑色区域对应图片完全显示，透明区域对应图片完全透明，中间过渡带实现平滑隐入背景的效果。
直接在你原有代码基础上补充以下CSS即可：

.spoiler-image {
    float: right;
    margin-top: 175px;
    margin-right: 200px;
    /* 此处填写你页面实际的背景色值，比如#fff、#f5f5f5等 */
    background: #YOUR_PAGE_BG_COLOR;
}
.spoiler-img.vignette {
    display: block;
    /* 兼容webkit内核浏览器 */
    -webkit-mask-image: radial-gradient(circle at center, #000 60%, transparent 100%);
    mask-image: radial-gradient(circle at center, #000 60%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

参数调整说明：

• 渐变里的60%代表图片完全清晰显示的范围阈值，数值越大清晰区域越大、边缘虚化带越窄，按需调整即可
• 需要椭圆虚化效果把circle替换为ellipse，需要调整清晰区域位置可修改中心定位，比如circle at 30% 40%就把清晰中心放在图片横向30%、纵向40%位置
• 觉得过渡太生硬可以加中间色阶拉长过渡带，比如写成radial-gradient(circle at center, #000 40%, #000 65%, transparent 100%)

方案2：伪元素叠层实现（兼容性最佳，适配极低版本浏览器） #

如果需要兼容不支持CSS mask的旧浏览器，可给父容器加绝对定位的伪元素，叠在图片上层，伪元素填充从透明到页面背景色的径向渐变，模拟融背景效果。
对应CSS代码如下：

.spoiler-image {
    float: right;
    margin-top: 175px;
    margin-right: 200px;
    /* 给伪元素提供定位基准 */
    position: relative;
}
.spoiler-img {
    display: block;
}
.spoiler-image::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none; /* 避免遮挡图片的点击、右键等交互 */
    /* 渐变终点色必须和页面背景色完全一致 */
    background: radial-gradient(circle at center, transparent 55%, #YOUR_PAGE_BG_COLOR 100%);
}

注意事项 #

• 两种方案都需要保证背景色值和图片所在区域的页面实际背景色完全一致，否则会出现边缘色差
• 不建议尝试用filter实现这类效果，CSS滤镜是全局修改元素的色彩、模糊度等属性，无法实现按区域精准控制透明度的需求

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