如何去除CSS blur实现模糊背景时边缘的异常白边

问题成因 #

CSS filter: blur() 效果计算像素时会采集元素边缘外的像素做平滑过渡，默认元素尺寸和父容器完全贴合时，边缘会采集到容器外的透明像素，最终生成半透明白边，和图像上采样算法无关。

可行修复方案 #

• 扩边裁切法（兼容性最好，通用所有场景）
  给模糊背景元素设置大于父容器的尺寸，把产生白边的边缘区域推到父容器可视范围外，父容器添加overflow: hidden裁切掉超出部分即可。
  扩边尺寸需要≥你设置的模糊半径的2倍，你当前代码里blur(5px)对应扩边10px就足够。
  完整修正代码：

/* 播放器父容器 */
.bg-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* 关键：裁切超出的模糊边缘 */
}
.bg-img {
    position: absolute;
    /* 负偏移+宽高增量 把边缘推到可视区外 */
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    background-image: url("https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: blur(5px) brightness(0.4) saturate(2);
}

<div class="bg-wrap">
    <div class="bg-img"></div>
    <!-- 播放器其他控件、专辑封面实图放在bg-img同级靠后位置，不会被模糊效果影响 -->
</div>

• 内阴影遮盖法（适合不方便修改父容器属性的场景）
  给模糊背景元素添加和封面主暗调一致的内阴影，直接遮盖边缘白边，不需要调整元素尺寸：

.bg-img {
    /* 保留你原有所有属性，追加下面这行 */
    box-shadow: inset 0 0 25px 10px #2a2018; /* 颜色替换为当前专辑封面的主暗色调即可 */
}

注意：不要尝试给模糊元素加transform: scale(1.05)之类的缩放做扩边，部分浏览器下缩放后的模糊采样依然会带出透明边缘，稳定性不如直接改偏移和宽高的方案。

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