为div添加边距不会移动背景的位置

我试图将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;
是background-attachment: fixed;的简写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>

---

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

链接地址: http://www.djcxy.com/p/87779.html

上一篇: Adding margin to div does not move placement of background

下一篇: top moves parent element