Question

我通过以下方式使用全尺寸背景：

background: url(/static/img/background/my_bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Q1。当我的页面展开以显示额外内容时，bg跳跃变大，有没有办法阻止它？

Q2。对于IE7-8的封面bg来说，什么是好的工作或后备？

由于

Answer 1

如果我错了，请纠正我，但我假设你试图让你的背景图像不能垂直扩展/移动，对吗？如果是这种情况，那么这个CSS可能会按照您的意愿行事：

    background-image: url('/static/img/background/my_bg.jpg');
    background-size: auto 1080px;
    background-position: center top;
    background-repeat: no-repeat;

背景垂直尺寸设置为1080px，但您可以将其设置为您想要的任何值，因此它是静态值（宽度的auto *值将仅保留图像宽高比）。这应该可以防止图像缩放。使用中心顶部进行定位而不是居中中心应该将图片固定在顶部中间位置，以便在页面垂直展开时不会向下移动。

如果您希望图像缩小但只能缩放到某一点，我认为您需要使用Div标记来包含整个页面并将图像设置为Div的背景。从那里你应该能够设置你的图像比例，并设置最大宽度和最大高度。

如果这没有帮助，我们将非常感谢您尝试实现的效果的更多信息。：）

CSS全屏背景 - 页面更改时跳转

1 个答案: