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

Question

我正在尝试将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;
    }

Answer 1

已修复 background: blue url("http://i.imgur.com/BsTVroc.jpg") fixed center top;
是background-attachment: fixed;的简写形式这就是背景图像固定在顶部“页面”的原因。如果没有此属性，背景图像将移至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>

Answer 2

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