固定背景附件和容器宽度

Question

如果我的问题很愚蠢，我很抱歉，但我无法理解 "a picture is fixed with regard to the viewport" 的含义以及它与以下内容的关系：

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

固定背景图像使用整个 "viewport" 或 window 来包含图像。您的图片可能未到达您设置的显示区域。我敢打赌，如果您将浏览器 window 缩小得非常小，您将能够看到您的图片。这是因为使用 "fixed" 的背景图像固定到整个视口，而不是它们定义的元素。但是，它们只能在定义它们的区域中查看。如果这有帮助或您需要，请告诉我进一步解释。

固定背景附件和容器宽度

background-attachment fixed and container width

css

background-attachment