背景附件固定和容器宽度答案

【问题标题】：background-attachment fixed and container width背景附件固定和容器宽度
【发布时间】：2018-07-25 20:09:25
【问题描述】：

如果我的问题很愚蠢，我很抱歉，但我无法理解“图片相对于视口是固定的”是什么意思以及它与以下事物的关系：

假设我们有一个html元素<div class="background"></div>和一些样式

.background {
    background: url(some-image.jpg) no-repeat fixed;
    height: 500px;
    width: 150px; /* suppose that this width is less than a width of the picture */
}

在这种情况下，背景图像不会出现。我不明白为什么以及如何与视口的想法相关。

【问题讨论】：

“我不明白为什么” - 因为默认背景位置是中心，而您的元素 - 可能位于左上角，在一个非常基本的示例中? - 根本达不到那里。减小浏览器窗口的大小，直到该元素几乎填满它，您应该会看到图像在某个时候出现。（您可以为您的 div 元素添加背景颜色或轮廓，以更清楚地查看它与浏览器窗口和背景图像的关系。或者将背景图像应用到 html 元素，然后您将立即看到它实际上在哪里......）
是的，我明白了。非常感谢！

标签： css background-attachment

【解决方案1】：

固定的背景图像使用整个“视口”或窗口来包含图像。您的图像可能包含在图像未到达您设置显示它的区域的情况下。我敢打赌，如果您将浏览器窗口缩小到非常薄，您将能够看到您的图像。这是因为使用“固定”的背景图像固定到整个视口，而不是定义它们的元素。但是，它们只能在它们定义的区域中查看。让我知道这是否有帮助或者您是否需要进一步解释.

【讨论】：

现在我明白了。非常感谢！