クロム - 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-n番目のストライプと重なるようにしようとしています、なぜ私はそれが機能していないのか分かりません。ストライプは、それが繰り返されるたびにより多く分離されます。 「前」疑似要素が15pxごとに繰り返される場合、その高さが正確に60pxの場合、「後」疑似要素を4n番目のストライプに配置しないでください。

編集：

これは、Firefoxです：ただ、これが唯一のChromeで起こる気づい

Answer 1

私はそれを得ることはありませんあなたが望むように、ストリップを（表示されていますそれをチェックするには、ストリップの色のみを更新しました）。何が問題ですか？

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>