html - CSS全屏背景-页面变化时跳转

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 的封面背景，有什么好的解决方法或后备方法？

谢谢

Answer 1

如果我错了请纠正我，但我假设您正试图阻止背景图像垂直扩展/移动，对吗？如果是这样的话，那么也许这个 CSS 会做你想做的事:

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

背景垂直大小设置为 1080 像素，但您可以将其设置为任何您想要的值，因此它是一个静态值(宽度的 auto* 值将简单地保留您的图像纵横比)。这应该可以防止图片缩放。使用 Center Top 而不是 Center Center 定位应该使您的图片锚定在顶部中间，这样如果页面垂直展开它就不会向下移动。

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

如果这没有帮助，我们将不胜感激更多关于您试图达到的效果的信息。 :)