铬 - CSS - 背景尺寸重叠

遇到麻烦重叠背景图像是这样的：铬 - CSS - 背景尺寸重叠

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条，但我不明白为什么它不起作用。条纹在每次重复时会变得更加分离。如果“before”伪元素每15px重复一次，如果高度恰好为60px，那么不应该将“after”伪元素放置在第4个条纹上？

编辑：只注意到这只是发生在Chrome：

这是火狐：

来源

2017-05-08 BizTuk

我看不出有什么问题，在您的代码，除非你正在使用的“之前”和“之后”相同的颜色，所以说是“隐形”的眼睛，我已经改变它在这个小提琴中更加明显https://jsfiddle.net/351wpfgx/ – am05mhz

我添加了一个Chrome渲染的图像，你可以看到蓝色的eline没有排成白色。它在Firefox中工作正常 – BizTuk

您的问题中的堆栈代码段是否为您呈现相同的方式？它也不适合我。事实上，在任何浏览器中我都没有看到任何蓝色。 – BoltClock

我不明白这一点，显示条，只要你想（要检查它，我只更新了条形颜色）。问题是什么？

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>

来源

2017-05-08 10:47:00

我编辑了我的帖子，其中包含Chrome和Firefox中呈现的内容的图片，显然由于某种原因，它不适用于Chrome。 – BizTuk

@BizTuk，我只在铬中运行此代码段...工作正常.. –

铬 - CSS - 背景尺寸重叠

回答

相关问题