CSS背景固定+封面拉伸图片（未正确覆盖）

Question

我在我的 ReactJS 网站中使用固定的背景图片。我在页眉区域使用的图像被奇怪地拉伸（放大，只有一小部分图片可见），即使不同元素的相同 CSS 属性效果很好。

App.js

return (
<div id="main">
    <div id="header">
    ...
    </div>
...
    <div id="bg-img1" className="background_image">
...

App.css

#header {
  background-image: url("img/svatba.jpg");
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  height: 300px;
  background-repeat: no-repeat;
}
...
.background_image {
  background-size: cover;
  background-position: center;
  text-align:center;
  min-height: 326px;
  background-repeat: no-repeat;
}
#bg-img1 {
  background: url('img/svatba2.jpg');
  background-attachment: fixed;
  background-repeat: no-repeat;
}
...

现在“header”元素中的图像显示为缩放，而不是应有的覆盖视口。 “bg-img1”元素中的图片显示正常。

我错过了什么？

Answer 1

background-attachment

background-attachment: fixed 常用的方式是防止背景图像在文档滚动时相对于视口移动。

注意：出于解释的目的，视口可以被认为等同于浏览器窗口，尽管isn't strictly the case。

CSS 主要通过获取元素的背景图像并将其附加到视口而不是元素本身来实现这一点。 由于用户滚动时视口不会改变其位置，因此图像将相对于窗口静态定位。到目前为止，一切顺利。

---

background-size

当我们尝试将其与background-size: cover（或contain）结合起来时，我们会遇到附件问题。因为background-attachment 已经将背景图像发送到视口，所以通过 CSS 进行的任何背景位置更改都将相对于视口。

这通常没问题，但这意味着当您尝试使用百分比值或预定义的大小运算符（如cover）时，背景也将调整为 视口。 p>

在撰写此摘要时，我发现 MDN 文档中提到了这种行为。唯一的问题是它只是在背景大小页面的Values 部分的percentage 段落中间卡住了两个句子。哎呀。

---

Demo

我创建了一个交互式演示来展示这种行为的结果。要查看它，click here。

该演示将显示四个面板，每个面板都有不同的尺寸和附件组合。将鼠标移到每个面板上，查看背景图像在容器中的位置以及隐藏的内容。

^{_{有趣的事实：我对这个演示进行了 300 多次修改，然后才舒服地称之为完成：P}}

---

结论

在你下面的一个 cmets 中，你说（强调我的）：

Cover 是罪魁祸首——但我知道为什么。所有图片 是风景。元素具有最小高度。我希望封面 将修复视口的宽度，而 contain 将修复 高度到元素高度。相反，我看到封面疯狂地放大 （不匹配任何尺寸）并且包含匹配宽度 （这就是我想要的）。但为什么呢？

CSS 经常颠覆预期，这也不例外。对于以下情况，假设我们使用的是background-repeat: no-repeat。

• cover 缩放背景图像，使其完全适合元素的 最大 尺寸并溢出较小的尺寸。这通常会导致它比元素大很多，只显示图像的一部分。
• contain 调整背景图像的大小，使其适合元素的最小尺寸，并在较大尺寸的图像两侧留下空白空间。

但是当你使用background-attachment: fixed...

• 当您使用cover 时，您实际看到的是缩放图像以匹配视口的高度，因为高度较小。对于横向图像，图像的高度将缩放到视口的高度，这就是它看起来如此之大的原因。
• 当您使用contain 时，图像会缩放以匹配视口的宽度。如果您的元素占据了视口的整个宽度，这将覆盖该元素，并在必要时切断图像的高度。

如果您想使用相对元素 cover 或 contain 来调整图像大小，您的两个选择基本上是删除 background-attachment: fixed，或者调整源图像的大小，以便您的 background-size 声明不是必要。不幸的是，目前没有 CSS 解决方案可以同时启用附件和基于关键字的大小。

Answer 2

当您将 background-size 设置为“cover”时，您是在告诉它拍摄该图像并调整其大小（或如您所说的“放大”）以使其覆盖整个部分（此处为 @987654321 @)。

如果您希望有一个 300 像素高的标题，它跨越整个页面的宽度而不会丢失图像的任何部分，您需要提供与标题具有相同比例的图像。

例如，如果您的标题为 300 x 1000，您可以加载相同尺寸或​​ 120 x 400 的图片，同时保持 3:10 的纵横比。