4

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

百分比是根据宽度计算的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/

4

2 回答 2

3

看起来里面的百分比linear-gradient预计将达到 100%。

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

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

于 2013-07-10T12:51:22.323 回答
1

背景图像中的百分比不是基于 1000px。它基于背景大小。在这种情况下，您需要 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%;
}
于 2013-07-10T12:51:01.300 回答