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

Question

我有这段代码：

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

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

Answer 1

如果在顶部空间没有任何东西，有办法伪造它。

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

像往常一样应用背景（repeat-y），但剪辑背景为div的content-box。

Background-clip @ MDN

＆＃13;

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;

或

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

＆＃13;

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;