CSS background-position 100%（右）没有按预期工作答案

【问题标题】：CSS background-position 100% (right) not working as expectedCSS background-position 100%（右）没有按预期工作
【发布时间】：2014-01-31 20:55:59
【问题描述】：

我有一个宽度小于 100% 的简单 div，背景图像的背景位置为 100% 0。而不是 bg 图像粘在 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);
}

我为它做了一个小提琴：http://jsfiddle.net/bobmeador/j2MWX/ 上面的元素显示了问题。下面是完整的图像，因此您可以看到被截断的内容。

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

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

【问题讨论】：

标签： css background-position

【解决方案1】：

我认为问题是这个background-attachment: fixed;，如果你删除它，图像就会完全对齐到右边。

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

【讨论】：

啊——没错。不幸的是，因为我们在视差实现中使用它，所以我们需要固定附件 - 至少我们目前正在这样做的方式。我看看能不能放回0/0位置，用JS根据浏览器宽度向右移动...