css - CSS3 1px 对角线渐变

Question

我想使用 CSS3 创建一个对角线图案，如下所示：

所以1px深色对角线，1px浅对角线等等......

这就是我想出的，我觉得我很接近，但有些事情肯定是不对的：

background-color: #454545;
background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 1px, transparent 1px, transparent 4px);

演示：

http://tinkerbin.com/6mTBtADt

Answer 1

只需在现有代码中使用背景尺寸尝试添加此背景尺寸：8px 8px;

Answer 2

您的代码在 Firefox 中看起来很棒，但是当我在 Chrome 中查看它时可以看到问题。

它实际上看起来你的渐变是正确的，因为如果你在浏览器上重新绘制（即通过调整它的大小）它有时看起来接近 Firefox 版本。这让我相信这是 Chrome 中的一个错误。

如果你从 1px 增加到 4px，你可以看到它正在工作，但非常参差不齐。