Javascript 定位背景图像-x从顶部和x从底部

我正在尝试放置背景图像，以便在div的顶部和底部留有50px的空间

我可以通过这个属性轻松地将背景图像定位在顶部下方50px的位置

background-position: 0 50px;

但是，我如何定位这个背景图像，使底部有50px的空间lefft

我试过这个

 background-position: 0 50px 0 50px;

但这似乎不起作用。我假设它将接受4个参数，用于从4个方向定位它

---

有什么想法吗？

不幸的是，我认为这是不可能的。根据它的用途，您可能可以使用两个div，内部div具有背景图像和50px的上下边距

为什么不加一个50像素的余量呢？像这样：

.test {

    border: 2px solid red;
    background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
    height: 500px;
    width: 500px;
    background-repeat: no-repeat;
    margin:50px;

}

---

尝试添加这两个属性

background-size: 500px 400px;
background-position: 0 50px;

---

请改为尝试背景剪辑属性：

padding-top:50px;
padding-bottom:50px;
background-clip: content-box;

---

看这把小提琴：

你不能用背景位置来做这件事；但是，您可以使用伪元素将某些内容组合在一起

以下是更新后的CSS：

.test {
    border: 2px solid red;
    height: 500px;
    width: 500px;
    position: relative;
}
.test:before {
    content: '';
    z-index: -1;
    background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
    background-repeat: no-repeat;
    position: absolute;
    top: 50px; left: 0; right: 0; bottom: 50px;
}

不过，您可以使用CSS

.test{
边框：2倍纯红；
背景图像：url（“http://www.reallyslick.com/pictures/helios.jpg");
背景位置：0 50px；
背景尺寸：100%400px；
高度：500px；
宽度：500px；
背景重复：无重复；
}

---

替代方法 或者，可以使用两个嵌套元素。外层的顶部和底部都有衬垫，这样内层就不会到达顶部/底部

我使用了CSS，因此填充在高度中得到了考虑。请注意，对这一点的支持也很重要

---

或者，可以从外部元素的高度中减去填充

---

这里有一个方法。放置具有绝对定位和负z索引的图像。将其放置在测试div中的任何内容后面

html

---

你可以在元素上加一个50像素的边框

html

---

谢谢你的建议。但是，我希望这张图片底部留有空白。事实上，我做的事情比看起来要复杂得多。我正在使用d3库制作的时间线背景图像哦，我明白了。那么，您的div大小是始终相同还是会根据窗口大小而改变？div大小不是固定的。它将根据内部呈现的数据、屏幕大小和设备而变化。这是可行的，这是我一直在寻找的理想解决方案。非常感谢你，伙计：）

<div class="test">
    Text on top of background.
    <img src="http://www.reallyslick.com/pictures/helios.jpg" class="background"/>
</div>

.test {    
border: 2px solid red;
height: 500px;
width: 500px;
overflow: hidden;
position: relative;
color: #fff;
}

.test .background {
    position: absolute;
    bottom: 50px;
    left: 0;
    z-index: -1;
}

<div class="test"></div>

.test {
  outline: 2px solid red;
  border: 50px solid transparent;
  background-image: url("http://www.reallyslick.com/pictures/helios.jpg");
  background-position: center;
  background-size: auto 100%;
  height: 500px;
  width: 500px;
  background-repeat: no-repeat;
  box-sizing: border-box;
}