CSS实现hover图片模糊放大时出现背景色边框如何去除

DevOps 小满

2026-8-28

问题根因

动画过程中出现的背景色边框是两个问题共同导致的：

全局通配符*给所有元素（包括img标签）都设置了background-color: rgb(44, 40, 40)，当图片应用blur()模糊滤镜时，模糊边缘的半透明区域会透出img自身的背景色，缩放动画过程中这个透出的边缘刚好卡在overflow: hidden的裁剪边界，看起来就像一圈临时出现的边框。
模糊滤镜的渲染边缘默认存在1px左右的抗锯齿溢出，配合圆角裁剪做过渡动画时，会出现边缘漏底的视觉问题。

修复方案

改两处CSS即可彻底解决：

删除通配符选择器里的全局背景色设置，仅给body标签设置页面背景，不要给img等内部元素强加背景属性
给做动画的图片加极小的初始缩放补偿，提前把模糊可能溢出的边缘藏在容器裁剪区域外，避免动画过程中漏边

修正后的核心代码

/*General classes*/
@import url("https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap");
* {
  /* 移除此处的全局背景色设置 */
  font-family: "Play", sans-serif;
  padding:0;
  margin: 0;
  box-sizing: border-box;
}
/* 单独给body设置页面全局背景 */
body {
  background-color: rgb(44, 40, 40);
}

.project__img{
    max-width: 100%;
    transition: all 500ms ease ;
    /* 初始微缩放，提前把模糊边缘溢出部分藏在裁剪区外 */
    transform: scale(1.01);
}

.project__wrapper{
    display: flex;
    box-shadow: 0 20px 80px rgba(255, 255, 255, 0.767);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.project__wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: #1c1d25;
    opacity: 0;
    transition: opacity 450ms ease;
    z-index: 10;
}

.project:hover .project__wrapper:before {
    opacity: 0.7;
}

.project:hover .project__img{
    transform: scale(1.07);
    filter: blur(20px);
}