html - 背景图像位于屏幕的“0% 0%”而不是父元素，为什么？

Question

为了更好地理解我在说什么，请转到这支笔，它显示了我正在使用的 HTML 和 CSS 代码（带有预览）。

看一下第二张背景图片的 CSS 代码：

.top-navbar-channels a {
    background-attachment: fixed;
    background-color: transparent;
    background-image: url('http://i.imgur.com/Z1YZt.png');
    background-position: 112px 8px;
    background-repeat: no-repeat;
    padding: 0 0 0 35px;
}

我不明白的是，背景被定位在屏幕上，而不是父元素。我尝试display: block;了父元素和元素本身，但没有任何改变。

我错过了什么？

Answer 1

当您拥有background-attachment: fixed时，背景图像的原点始终是视口。这就是它从屏幕左上角开始并相对于屏幕左上角定位的原因。

由于您已经将导航栏附加到页面顶部，因此您不必对背景图像应用固定定位。background-attachment: fixed从您的两个导航链接中删除并相应地调整坐标应该是安全的。