如何垂直定位重复-y图像背景？

Question

我有这个代码：

background:url("someimage.gif") repeat-y 50px right;

这里的问题是我需要背景从顶部开始 50 像素，因此图像和顶部之间有 50 像素的空间，但这不会发生。我很清楚如果不重复图像会正确定位，但我需要垂直重复它。有什么办法吗？如何在重复图像的顶部和开头之间实现该空间？

Answer 1

如果顶部空间中没有任何东西，有一种方法可以伪造它。

将padding-top 的 50px（或您选择的值）应用于 div。

照常应用背景 (repeat-y)，但 剪辑背景到 div 的 content-box。

Background-clip @ MDN

div {
  background: url(http://placekitten.com/50/50) repeat-y;
  padding-top: 50px;
  height: 50vh;
  background-clip: content-box;
  width:50vw;
  margin:2em auto;
  border:1px solid red;
}

<div></div>

或

使用适当大小/定位的位置伪元素

div {
  height: 50vh;
  width: 50vw;
  margin: 2em auto;
  border: 1px solid red;
  position: relative;
}
div:before {
  content: '';
  position: absolute;
  width: 100%;
  height: calc(100% - 50px);
  background: url(http://placekitten.com/50/50) repeat-y;
  top: 50px;
  left: 0;
}

<div></div>