html - 如何保持图像背景图像静止？

Question

我想将一个图像固定为背景，同时在其上滚动一个半透明框。然而，当我尝试在 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

任何帮助将不胜感激。

Answer 1

在 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