0
Je vais avoir du mal à se chevaucher un background-image comme ceci:Chrome - CSS - Contexte taille chevauchement
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>Je suis en train de chevaucher la bande 4-n-ième, mais je ne comprends pas pourquoi ça ne marche pas. La bande devient plus séparée chaque fois qu'elle se répète. Si le pseudo-élément "before" se répète toutes les 15px, le pseudo-élément "after" ne devrait-il pas être placé sur la 4-ème bande si sa hauteur est exactement 60px ?.
Edit: Juste remarqué cela se produit seulement dans Chrome:
C'est Firefox:
je ne vois aucun problème dans votre code, sauf que vous utilisez la même couleur pour le « avant » et « après », de sorte que est « invisible » à l'oeil , je l'ai changé pour être plus visible dans ce violon https://jsfiddle.net/351wpfgx/ – am05mhz
J'ai ajouté une image de ce que Chrome rend, vous pouvez voir que le blu eline n'est pas aligné avec le blanc. Cela fonctionne bien dans Firefox – BizTuk
Est-ce que l'extrait de pile de votre question est le même pour vous? Ce n'est pas pour moi non plus. En fait, je ne vois aucun bleu dans les deux navigateurs. – BoltClock