向 div 添加边距不会移动背景图像的位置

Adding margin to div does not move placement of background-image

我正在尝试将 div 的背景图像与 div 的顶部对齐,但它继续将其与父 div 的顶部对齐或整个页面(我不确定是哪一页,但我认为是页面)

JSFiddle:https://jsfiddle.net/Minecraft_Percabeth/1wbuduze/2/

#bottom div 的背景图像应该显示在他们的头顶上方,但顶部与#wrap div 的顶部对齐。 编辑: 向下滚动时图像也应保持在原处,这就是我目前使用固定的原因。

把margin-top改成0看看我的意思。

<div id="wrap">
    <div id="bottom"></div>
</div>

#wrap {
    background-color: yellow;
    height: 500px; width: 500px;
    position: absolute;
}
    #bottom {
        background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
        height: 400px; width: 500px;
        margin-top: 100px;
    }

固定
background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
是shorthand为了background-attachment: fixed;
所以背景图固定在最上面"the page"。
没有这个属性 背景图片移动到 margin-top: 100px;

编辑:

为了垂直移动背景图像,您可以使用background-position: center XY%;并再次添加background-attachment: fixed;

#bottom {
    background-image: url("http://i.imgur.com/BsTVroc.jpg");
    background-repeat: no-repeat;
    background-position: center 20%;
    background-attachment: fixed;
    height: 400px;
    width: 500px;
    margin-top: 100px;
}
#wrap {
    background-color: #737373;
    height: 500px;
    width: 500px;
    position: absolute;
}
<div id="wrap">
    <div id="bottom"></div>
</div>

您可以使用 background-position: center 100px; - 这会将背景图像向下移动 100 像素。