html - 如何制作后台附件:fixed; not stretch the image?

Question

我想做一个背景图随着使用滚动而移动，用起来很正常背景附件:固定；但问题是它正在拉伸(stretch)图像，我无法再定位它了。

http://jsfiddle.net/5c3b56a7/3/

.container{

    display: block;
    position: relative;
    width: 100%;
    margin:0 0 10px 0;
    padding:0;
    overflow:hidden;
    background-image:url('http://cdn.wallwuzz.com/uploads/background-fantasy-wallpaper-array-wallwuzz-hd-wallpaper-4338.jpg');
    overflow:hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size:cover;
    min-height:350px;

}

.container2{
    background-attachment:fixed;
}

您可以在全屏模式下更好地查看问题 http://jsfiddle.net/5c3b56a7/3/embedded/result/

第一张图片位置居中

第二个由于附件原因无法定位。

有什么办法吗？

Answer 1

很遗憾，您不能同时使用 background-attachment: fixed 和 background-size: cover。当 background-attachment: fixed 确定背景图像的行为类似于 position: fixed 元素时，background-size: cover 强制它计算相对的背景大小到元素本身。

您仍然可以使用 JavaScript 在 window.onscroll() 事件中计算背景位置。