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

Question

如果我的问题很愚蠢，我很抱歉，但我无法理解“图片相对于视口(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 */
}

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

Answer 1

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