0
Ich habe Probleme, ein Hintergrund-Bild so zu überlappen:Chrome - CSS - Hintergrund-Größe überlappende
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>Ich versuche, die 4-n-ten Streifen zu überlappen, aber ich verstehe nicht, warum es nicht funktioniert. Der Streifen wird jedes Mal mehr getrennt, wenn er sich wiederholt. Wenn der „vor“ Pseudoelement jedes 15px wiederholt, soll nicht das „nach“ Pseudo-Elemente über den 4-n-ten Streifen gebracht werden, wenn es genau Höhe 60px ist ?.
Edit: Gerade bemerkt dies geschieht nur in Chrome:
Dies ist Firefox:
ich sehe kein Problem in Ihrem Code, mit der Ausnahme, dass Sie die gleiche Farbe für die „vor“ und „nach“ verwendet wird, so dass „unsichtbar“ für das Auge , ich es in dieser Geige https://jsfiddle.net/351wpfgx/ sein sichtbarer ändern – am05mhz
ich ein Bild hinzugefügt, was Chrome rendert, können Sie sehen, dass die blu eline nicht auf dem weißen ausgekleidet ist. Es funktioniert gut in Firefox – BizTuk
Macht das Stack Snippet in Ihrer Frage den gleichen Weg für Sie? Es tut mir auch nicht. Tatsächlich sehe ich überhaupt keinen Blau in jedem Browser. – BoltClock