线性梯度百分比与像素

Question

我有两个例子，据我所知，这两个应该是相同的。

百分比是根据960px;的宽度计算的

这是像素版本，看起来效果很好。

.pixel {
    background-color: #111111;
    background-image: linear-gradient(90deg, transparent 40px, #444 20px );
    background-size: 60px, 950px;
    background-position: 10px, 10px;
}

但是，基于相同百分比的渐变不起作用：

.percentage {
    background-color: #111111;
    background-image: linear-gradient(90deg, transparent 4.1666%, #444 2.08333%);
    background-size: 6.25%, 98.95833%;
    background-position: 1.04167%, 1.04167%;
}

我想使用百分比，这样当容器缩小时这个渐变是流动的。

演示： http://jsfiddle.net/shannonhochkins/A3Z2L/3/

Answer 1

看起来linear-gradient 中的百分比加起来应该是 100%。

您的第二个示例是说“在background-size 的 6.25% (60px) 内，前 4.1666% 是透明的，接下来的 2.08333% 是灰色的”，但您没有指定剩余 93.75007% 的颜色是什么应该是 60px。 （看起来它只是为剩余空间使用最后一种颜色，所以在 60 像素的背景尺寸内，你有 4.1666% 的透明和剩余的 95.8334% 的灰色。）

鉴于您在第一个示例中的比例为 66%/33%，您的第二个示例应该使用 linear-gradient(90deg, transparent 66.6667%, #444 33.3333%)。

Answer 2

背景图片中的百分比不是基于 1000 像素。它基于背景大小。在这种情况下，您需要 60px 的 66.6%。

.percentage {
background-color: #111111;
background-image: linear-gradient(90deg, transparent 66.6666%, #444 2.08333%);
background-size: 6.25%, 98.95833%;
background-position: 1.04167%, 1.04167%;
}