1

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

应用程序.js

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

应用程序.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”元素中的图像正确显示。

我错过了什么？

4

2 回答 2

0

背景附件

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

注意：出于本说明的目的，视口可以被认为等同于浏览器窗口，尽管严格来说并非如此。

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

背景尺寸

background-size: cover当我们试图将它与（或contain）结合时，我们会遇到依恋问题。因为background-attachment已经将背景图像发送到视口，所以通过 CSS 所做的任何背景位置更改都与视口相关。

这通常很好，但这意味着当您尝试使用百分比值或预定义的大小运算符cover时，背景也将被调整为viewport的大小。

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

演示

我创建了一个交互式演示来展示这种行为的结果。要查看它，请单击此处。

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

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

结论

在您下面的一条评论中，您说（强调我的）：

封面是罪魁祸首——但我知道为什么。所有的图像都是风景。元素具有最小高度。我希望封面将宽度固定到视口，并且包含将高度固定到元素高度。相反，我看到封面缩放荒谬（不匹配任何尺寸）并且包含匹配宽度（这是我想要的）。但为什么？

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

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

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

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

如果您想使用 element-relative coveror来调整图像的大小，那么contain您的两个选项本质上是删除background-attachment: fixed或调整源图像的大小，这样background-size就不需要您的声明。不幸的是，目前没有 CSS 解决方案可以同时启用附件和基于关键字的大小。

于 2019-08-23T14:13:18.487 回答
0

当您将背景大小设置为“覆盖”时，您是在告诉它拍摄该图像并调整其大小（或如您所说的“放大”），使其覆盖整个部分（此处#header）。

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

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

于 2019-08-23T13:32:06.117 回答