如何实现背景滤镜局部生效？指定区域需显示默认白色背景

我给背景图片加了linear-gradient来调暗画面，但希望图中红色标注的区域只显示默认背景色（白色）。我试过设置height属性为500px，但完全没效果。刚接触编程一周，要是问题说不清楚请见谅。另外，我把background-size设为1450px是因为不设置的话图片会被大幅放大。

我的背景CSS代码如下：

body {
  background: linear-gradient(rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.80)), url(imgs/satbackgroundp3.png) no-repeat; 
  background-size: 1450px;
}

你现在的问题是把渐变暗化和背景图直接加在了body上，整个页面都会被这个背景覆盖，单独调body的height不会改变背景的覆盖范围。要让红色标注区域显示白色，得把这个区域做成一个独立的HTML元素，然后给它设置白色背景，让它“浮”在页面上层：

• 先在HTML里添加白色区域的元素：

<div class="white-area">这里放你要显示白色的内容</div>

• 然后给这个元素写CSS：

.white-area {
  background-color: white;
  /* 根据你的需求设置宽高、位置，示例如下： */
  width: 80%;
  height: 500px;
  margin: 0 auto; /* 实现水平居中 */
  padding: 20px;
  /* 确保元素在背景之上，默认层级已满足，加这个更保险 */
  position: relative;
  z-index: 1;
}

另外给个小建议：如果不想固定background-size为1450px，可以试试background-size: cover（让图片覆盖整个容器，可能裁剪部分边缘）或者background-size: contain（完整显示图片，容器可能留空白），这样能更好适配不同屏幕尺寸。

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