固定背景附件和容器宽度

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

固定的背景图像使用整个“视口”或窗口来包含图像。图像包含的方式可能无法到达您设置的显示区域。我敢打赌，如果您将浏览器窗口缩小得很细，您将能够看到您的图像。这是因为使用“固定”的背景图像是固定在整个视口中的，而不是固定在其定义的元素中的。但是，它们只能在其定义的区域中查看。请告诉我这是否有帮助或是否需要进一步说明