css - 背景图像:固定过度拉伸(stretch)图像

Question

在我的投资组合中，我正在尝试实现全宽固定(不是滚动，不是视差...固定)背景图像。此图像将用作前景图像的背景。

HTML:

<header>
    <img src="assets/img/blahblah1.png">
</header>

(标题应用了背景图像，img 是前景图像)

CSS:

header {
   background-image: url(../assets/img/blahblah2.jpg);
   background-attachment: fixed;
   background-position: 0 0;
   min-height: 15.625em;
   padding: 4em 0 12em;
   background-repeat: no-repeat;
   width: 100%;
   -webkit-background-size: cover;
   -ms-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
   padding: 0;
}

但是，问题在于 background-attachment: fixed 比默认值拉伸(stretch)图像更多。

请看这两张截图:一张没有。

Screenshot使用 background-attachment: fixed

Screenshot使用默认背景图像

我错过了什么？有解决方法吗？我绝对希望修复背景图像。

Answer 1

在尝试了背景属性之后，我想我找到了一个理想的组合。

• 使用 background-size: 100% 而不是 cover - 这将按容器宽度的比例拉伸(stretch)图像/p>

• 使用适当的最大宽度/最大高度

background-attachment: fixed 不需要做任何事情，但可以应用。

例子

背景图片 - 1000 x 540

* {
  box-sizing: border-box;
}
body {
  margin: 0;
}
header {
  margin: 0 auto;
  background: url(http://lorempixel.com/output/city-q-c-1000-540-9.jpg);
  background-size: 100%;
  background-attachment: fixed;
  width: 100%;
  max-width: 1000px; /* image width */
  background-repeat: no-repeat;
  padding: 20px;
}
img {
  max-width: 50%;
  max-height: 50%;
  display: block;
  /* remove inline gap */
}
@media screen and (max-width: 500px) {
  header {
    background-size: cover;
    background-attachment: scroll;
  }
}

<header>
  <img src="http://lorempixel.com/output/people-q-c-500-500-1.jpg">
</header>