css - 背景附件固定和容器宽度

Question

如果我的问题很愚蠢，我很抱歉，但我不明白“关于视口的图片是固定的”是什么意思，以及它如何与以下内容相关联：

假设我们有一个 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 */
}

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

Answer 1

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