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%;
}

我想使用百分比，以便当容器缩小尺寸时，此渐变是流动的。

DEMO： 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

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

.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%;
}

线性渐变百分比与像素

2 个答案: