如何消除CSS背景filter:blur导致的边框模糊，让轮廓更清晰？

问题概述 #

为背景应用filter: blur(5px)后整体效果达标，但边框区域模糊过度，尝试常规方案未解决，原始代码如下：

原始CSS代码 #

.main_container {
  position:relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
  border-radius: 6px;
}

.left_container {
  width: 70%;
}
.right_container {
  width: 30%;
  border-radius: 0px 6px 6px 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.box_left {
  width: 70%;
  margin: 20px;
  display: flex;
  flex-direction: column;
}
.box_right {
  width: 80%;
  padding: 20px;
  z-index: 999;
  position: relative;
}

img.attachment-full.size-full {
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 50%) 0px 5px 10px -5px;
}

.prd-img {
  display: block;
  background-size: cover;
  background-repeat: no-repeat; 
  height:300px;
  width:100%;  
  border-radius: 6px;
}

.blured-img{
  background-size: cover;
  background-repeat: no-repeat; 
  position:absolute; 
  top:0; 
  height:100%;
  width:100%; 
  filter:blur(5px);
}

原始HTML代码 #

<div class="main_container">
  <div class="left_container">
    <div class="box_left"><!-- Head Box Thankyou Page -->
        <h1>Some title here</h1>
      <p class="info-post-purchuase t2-light">
        Some text here
      </p>
    </div>
  </div>

  <div class="right_container"> 
    <div class="box_right">
       <div class="prd-img" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
    </div>
    <div class="blured-img" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
  </div>
</div>

核心原因 #

模糊滤镜会让元素边缘的像素向外扩散，当模糊层紧贴父容器边框时，扩散的像素会被边框的圆角裁剪，导致视觉上边框区域模糊过度。

解决方案 #

关键修改点 #

• 父容器开启溢出隐藏：给.right_container添加overflow: hidden，裁剪模糊层扩散出的多余像素。
• 模糊层设置负边距：让模糊层的尺寸比父容器大（负边距值等于模糊半径），抵消模糊扩散的影响，避免边缘出现空白或过度模糊。
• 同步背景定位：确保模糊层和显示层的background-position一致，避免背景错位。

修改后的完整代码 #

CSS代码

.main_container {
  position:relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  box-shadow: rgb(0 0 0 / 15%) 0px 5px 15px -5px;
  border-radius: 6px;
}

.left_container {
  width: 70%;
}
.right_container {
  width: 30%;
  border-radius: 0px 6px 6px 0px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* 裁剪溢出的模糊内容 */
}

.box_left {
  width: 70%;
  margin: 20px;
  display: flex;
  flex-direction: column;
}
.box_right {
  width: 80%;
  padding: 20px;
  z-index: 999;
  position: relative;
}

img.attachment-full.size-full {
  border-radius: 6px;
  box-shadow: rgb(0 0 0 / 50%) 0px 5px 10px -5px;
}

.prd-img {
  display: block;
  background-size: cover;
  background-repeat: no-repeat; 
  background-position: center center; /* 统一背景定位 */
  height:300px;
  width:100%;  
  border-radius: 6px;
}

.blured-img{
  background-size: cover;
  background-repeat: no-repeat; 
  background-position: center center; /* 和显示层同步定位 */
  position:absolute; 
  top: -5px; /* 负边距值等于模糊半径 */
  left: -5px;
  right: -5px;
  bottom: -5px;
  filter:blur(5px);
}

HTML代码

<div class="main_container">
  <div class="left_container">
    <div class="box_left"><!-- Head Box Thankyou Page -->
        <h1>Some title here</h1>
      <p class="info-post-purchuase t2-light">
        Some text here
      </p>
    </div>
  </div>

  <div class="right_container"> 
    <div class="box_right">
       <div class="prd-img" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
    </div>
    <div class="blured-img" style='background-image: url("https://edit.org/images/cat/book-covers-big-2019101610.jpg");'></div>
  </div>
</div>

内容的提问来源于Stack Exchange，提问作者Snorlax