如何保持图像背景图像静止?

How to keep an image background image still?

我想将一个图像固定为背景,同时在其上滚动一个半透明框。但是,当我尝试在 4:3 比例屏幕上执行此操作时,图像只被切成两半。

这是我的 CSS:

.content {
    background-color: black;
    background-image:url('http://xurbia.tk/alpha/pictures/Croped%20Xurbiar%20Logo%20Mr.%20Isolation.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;        
}

这是我想做的一个例子:

http://s.codepen.io/shardros/debug/vOVWwp

如有任何帮助,我们将不胜感激。

这听起来更像是你的 background-size 的问题,而不是保持不动。

尝试 background-size: contain 而不是 cover

不同点在这里: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

body 标签而不是 .content 标签上设置背景即可。

body {
    background-color: black;
    background-image:url('http://xurbia.tk/alpha/pictures/Croped%20Xurbiar%20Logo%20Mr.%20Isolation.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;        
}

Updated Example