html - Css - 如何停止使用尺寸覆盖进行图像缩放？

Question

我正在为宽度超过 2560 像素的屏幕创建简单媒体。我的问题是我有标题和超过 2600px 我为我的标题设置了静态宽度，当我调整窗口大小时超过 2600px 标题有 2600px 宽度但图像正在调整大小。如何设置相对于标题宽度而不是屏幕宽度的图像大小？？

#header {
  position: relative;
  height: 100vh;
  .background-image {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: url('~/images/17.jpg');
    background-size: cover;
    background-attachment: fixed;
    filter: brightness(50%);
    -webkit-filter: brightness(50%);
  }
}
@media only screen and (min-width: 2600px) {
  #header {
    width: 2600px;
    margin: 0 auto;
    height: 1000px;
    .background-image {
      width: 2600px;
    }
  }
}

Answer 1

问题出在 background-attachment: fixed; 上，它会导致背景随视口(viewport)缩放。根据MDN ,

The background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background doesn't move with the element. (This is not compatible with background-clip: text.)

显然，它也不与 background-size: cover 兼容。

解决方案:重新设置媒体查询中的background-attachment。

这是一个codepen与解决方案。
或者，对于喜欢代码片段的人，一个代码片段(仅编译了 SCSS)。

body {
  margin: 0;
}

#header {
  position: relative;
  height: 100vh;
}
#header .background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("https://placehold.it/900x300");
  background-size: cover;
  background-attachment: fixed;
  filter: brightness(50%);
  -webkit-filter: brightness(50%);
}

@media only screen and (min-width: 600px) {
  #header {
    width: 600px;
    margin: 0 auto;
    height: 190px;
  }
  #header .background-image {
    background-attachment: initial;   /* new */
  }
}

<section id="header">
  <div class="background-image">
    hello
  </div>
</section>

请注意，我稍微更改了尺寸以便进行测试；断点现在是 600px 而不是 2600px，因为我没有那么宽的显示器。所以你不必复制整个代码，带有背景附件的新行就足够了。