CSS 背景位置 100%(右)未按预期工作

Question

我有一个宽度小于 100% 的简单 div，背景图像的背景位置为 100% 0。背景图像没有粘在 div 的右侧，而是被切断了，似乎认为它的实际正确位置是 body 的边缘，而不是背景所在的 div。

.bg {
    width:80%;
    height:500px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 100% 0;
    background-size: 50%;
    background-image: url(http://www.blackitty.net/photographs/photos/slideshow/slide/133/Tofino_2013-11-24.jpg);
}

我为它做了一个 fiddle :http://jsfiddle.net/bobmeador/j2MWX/上面的元素显示了问题。下面是完整的图像，因此您可以看到被切断的部分。

知道为什么它似乎使用父级而不是它所属的 div 来定位吗？

当我的 .bg div 设置为宽度 100% 并且它位于宽度设置为 80% 的 div 内时，我得到了相同的结果。它似乎忽略了任何容器宽度，仅使用整体主体宽度作为其 100% 引用。

Answer 1

我认为问题出在这个background-attachment: fixed;，如果你删除它，图像会完美地右对齐。

http://jsfiddle.net/j2MWX/2/