网格线 - 使用线性渐变时的背景大小限制？答案

【问题标题】：grid lines - background-size limit when using linear-gradient?网格线 - 使用线性渐变时的背景大小限制？
【发布时间】：2015-05-19 18:29:03
【问题描述】：

Chromium/Google Chrome 中的 background-size 是否有某种限制？

在这里查看小提琴：https://jsfiddle.net/kc9d6k54/3/

我正在尝试实现不同间隔的网格线，这在一定程度上有效，但在这个例子中，当我经过256px 时，线性渐变的第二部分消失了。

示例代码：

.grid-lines div {
    background: 
        linear-gradient(0deg, #900 0, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%), 
        linear-gradient(0deg, #bbf 0, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%);
    background-origin: padding-box;
    background-clip: border-box;                    
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
}

...

.grid-lines .fifth {
    background-size: 1px 320px, 1px 40px;
    left: 600px;
}

Q1：为什么会这样？

Q2：我可以应用哪些变通方法/替代方法来获得我想要的效果（基本上是320px 和480px 的间隔）

BONUS Q：为什么深红色的线在 160px 列中显得更暗？

【问题讨论】：

它在 Firefox 中非常适合我。该错误只能在 Chrome 中重现。值得在标签中添加它
顺便说一句好问题，+1
谢谢，是的，它在 IE 中也能完美运行。
不是我见过的第一个strange behaviour of Chrome :)

标签： css google-chrome webkit chromium

【解决方案1】：

在为 midi 编辑器制作网格时遇到了这个问题。我需要可以根据拍号更改的小节、四分音符和细分的垂直线。

感谢您的观察，我尝试将条形标记设置为 2px。似乎 Chrome 尝试按比例（略微）缩放。

.grid-lines div {
    background: 
        linear-gradient(0deg, #900 0, transparent 2px), 
        linear-gradient(0deg, #bbf 0, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 1px, rgba(0,0,0,0) 100%);
    background-origin: padding-box;
    background-clip: border-box;                    
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
}

https://jsfiddle.net/b239Ldrv/

【讨论】：