CSS全屏背景 - 跳跃当页面更改

我通过使用一个全尺寸的背景：CSS全屏背景 - 跳跃当页面更改

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会跳跃变大，有没有办法阻止它？ Q2302。 IE7-8的封面bg是一个很好的解决方案或备份吗？

感谢

来源

2013-05-05 panthro

您必须使用沉重的图像，试图压缩它 – 2013-05-05 17:32:52

我不认为你理解这个问题。图片加载正常，页面增加时，页面大小增加。我不想增加bg尺寸。 – panthro 2013-05-05 18:25:47

因此，如果您不希望大小增加以便从CSS中移除属性，那么封面将会将bg大小增加到100 – 2013-05-05 18:26:50

纠正我，如果我错了，但我假设你想保持你的背景图片从扩张/垂直移动，对不对？如果是这样的话，那么也许这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的背景。从那里你应该能够设置你的图像缩放，并设置最大宽度和最大高度。

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

来源

2013-05-05 18:27:12

CSS全屏背景 - 跳跃当页面更改

回答

相关问题