如何制作背景附件：固定；不拉伸图像？

Question

我想让背景图像随着使用滚动而移动，并且使用background-attachment:fixed是正常的；但问题是它正在拉伸图像，我无法再定位它。

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: fixedand background-size: cover。当background-attachment: fixed确定背景图像的行为类似于position: fixed元素时， background-size: cover强制其计算相对于元素本身的背景大小。

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