为什么背景图片出现圆角且无法适配div容器？

我用代码示例里的图片时，宽高能正常适配片段规格，但自己添加的移动端图片无法适配div容器，而且背景图片还出现了圆角效果，这是什么原因？

现有代码 #

CSS代码

.story-content {
  width: 100%;
  height: 100vh;
}

.desert-story {
  width: 100%;
  height: 100%;
  background-image: url('https://images.unsplash.com/photo-1664575262619-b28fef7a40a4?ixlib=rb-4.0.3&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60');
  background-repeat: no-repeat;
  background-size: cover;
  background-origin: padding-box;
  position: relative;

}

.story-description {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 321px;
  border-radius: 20px;
  background: radial-gradient(76.31% 191.89% at 13.43% 22.19%, rgba(226, 228, 231, 0.8) 0%, rgba(228, 228, 229, 0.368) 100%);
  backdrop-filter: blur(10px);
  padding: 23px;
}

HTML代码

<div class="story-content">
    <div class="desert-story">
      <div class="story-description">
        <p>
          We saw a gap between what people need and what banks offer. It
          means millions of us aren't getting the banking experience we
          deserve for different reasons.
        </p>
      </div>
    </div>
  </div>

原因解析 #

• 移动端图片适配失效

  1. 你使用的图片URL带有w=500参数，这是一张固定宽度为500px的裁剪图，当移动端容器宽度小于500px时，图片无法自动缩小适配；容器宽度大于500px时，图片拉伸会失真，导致适配异常。
  2. background-size: cover是按比例覆盖容器，若图片本身的宽高比和移动端容器的宽高比差异过大，会出现图片被过度裁剪或显示不全的情况。

• 背景图片出现圆角的视觉假象
  这不是背景图片本身有圆角，而是.story-description的backdrop-filter: blur(10px)属性导致的。这个模糊滤镜会让父容器的背景透过半透明的.story-description显示，而.story-description设置了border-radius: 20px，模糊后的背景会贴合这个圆角边缘，看起来像是背景图片有了圆角。

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