html - Chrome - CSS - 背景大小重叠

Question

我无法像这样重叠背景图像:

div.test{
  position:relative;
  height: 100%;
  width: 100%;
  background-color: red
}

div.container{  
  height: 480px;
  width: 150px;
  
}

div.test:before, div.test:after{
      content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

div.test:before{
      background-image: linear-gradient(to bottom, #E5E5E5 1px, transparent 1px);
    background-size: 100% 15.0px;
}

div.test:after{
        background-image: linear-gradient(to bottom, blue 1px, transparent 1px);
    background-size: 100% 60px;
}

<div class="container">
  <div class="test">

  </div>
</div>

我试图重叠第 4 个条纹，但我不明白为什么它不起作用。条纹每次重复时都会变得更加分离。如果“之前”伪元素每 15 像素重复一次，如果“之后”伪元素的高度恰好是 60 像素，难道不应该将其放在第 4 个条纹上吗？

编辑:刚刚注意到这只发生在 Chrome 中:

这是火狐:

Answer 1

我不明白， strip 显示为您想要的(为了检查它，我只更新了 strip 颜色)。有什么问题吗？

div.test{
  position:relative;
  height: 100%;
  width: 100%;
  background-color: red
}

div.container{  
  height: 480px;
  width: 150px;
  
}

div.test:before, div.test:after{
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

div.test:before{
      background-image: linear-gradient(to bottom, #E5E5E5 1px, transparent 1px);
    background-size: 100% 15.0px;
}

div.test:after{
        background-image: linear-gradient(to bottom, #007ac2 1px, transparent 1px);
    background-size: 100% 60px;
}

<div class="container">
  <div class="test">

  </div>
</div>