Html Chrome-CSS-背景大小重叠

我很难像这样重叠背景图像：

div.test{
位置：相对位置；
身高：100%；
宽度：100%；
背景颜色：红色
}
div.container{
高度：480px；
宽度：150px；
}
分区测试：之前，分区测试：之后{
内容：“；
位置：绝对位置；
z指数：1；
左：0；
排名：0；
右：0；
底部：0；
}
分区测试：之前{
背景图像：线性渐变（至底部，#e5 1px，透明1px）；
背景尺寸：100%15.0px；
}
分区测试：之后{
背景图像：线性渐变（至底部，蓝色1px，透明1px）；
背景尺寸：100%60px；
}

---

我不明白，条带按您的需要显示（要检查它，我只更新了条带颜色）。有什么问题

div.test{
位置：相对位置；
身高：100%；
宽度：100%；
背景颜色：红色
}
div.container{
高度：480px；
宽度：150px；
}
分区测试：之前，分区测试：之后{
内容：“；
位置：绝对位置；
z指数：1；
左：0；
排名：0；
右：0；
底部：0；
}
分区测试：之前{
背景图像：线性渐变（至底部，#e5 1px，透明1px）；
背景尺寸：100%15.0px；
}
分区测试：之后{
背景图像：线性渐变（至底部，#007ac2 1px，透明1px）；
背景尺寸：100%60px；
}

我看不出你的代码中有任何问题，除了你对“before”和“after”使用了相同的颜色，因此对眼睛来说是“看不见”的，我已将其更改为在这把小提琴中更可见。我添加了一个Chrome渲染的图像，你可以看到蓝色线没有与白色线对齐。在Firefox中工作正常您的问题中的堆栈片段是否以相同的方式呈现给您？对我来说也不是。事实上，我在两款浏览器中都没有看到任何蓝色。我上传了我在Chrome和Firefox中看到的图片。Firefox浏览器似乎显示了预期的内容，但在Chrome浏览器中，我看到了一个越来越大的分离。@BizTuk-hmm，我正在使用最新的Chrome 64位windows浏览器，它显示正确，您的版本是什么？您启用了吗（显示不是100%）？我用Chrome和Firefox中呈现的内容的图像编辑了我的帖子，显然，由于某些原因，它不能在Chrome上工作。