React.js中如何让背景图铺满整个div并放大，上层展示对应图片？

目标效果：div容器的背景为对应影片图片的放大适配版本，同时在该背景层上方、容器居中位置展示原始的影片海报图片本身。

当前实现中，开发者给div设置了纯黑色背景，用来标记div的实际占据宽度，尚未达到预期的视觉效果。

当前已编写的代码 #

React JSX部分代码：

<div
  className="movie-details"
  style={{
    backgroundImage: `url(${movieImg})`,
    backgroundColor: "black",
    backgroundRepeat: "no-repeat",
  }}
>
  <img
    src={movieImg}
    style={{
      height: "100%",
      width: "300px",
    }}
  />
</div>

配套的CSS代码：

.movie-details {
  width: 90%;
  height: 355px;
}

.movie-details img {
  margin: auto;
  display: block;
  padding-bottom: 30px;
}

可直接落地的调整方案 #

当前实现和预期效果的核心差距，是没有对背景图的适配规则、层叠关系做设置，直接调整对应属性即可：

• 给.movie-details容器补充background-size: cover，让背景图自动等比缩放撑满整个div，不需要手动计算尺寸；
• 补充背景图居中定位规则，避免图片偏移；
• 分离模糊效果的作用范围：将模糊效果单独应用在背景层，不要影响上方的海报图展示；
• 调整内部海报图的层叠顺序，保证海报图浮在背景层上方。

调整后的完整CSS代码：

.movie-details {
  width: 90%;
  height: 355px;
  position: relative;
  /* 背景适配规则 */
  background-size: cover;
  background-position: center;
}

/* 单独承载模糊效果的背景层 */
.movie-details::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  filter: blur(12px) brightness(0.4);
  z-index: 0;
}

.movie-details img {
  margin: auto;
  display: block;
  padding-bottom: 30px;
  position: relative;
  z-index: 1;
}

调整后可删除JSX里设置的backgroundColor: "black"内联样式，避免和CSS的背景效果冲突。

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