向 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 像素。
我正在尝试将 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 像素。