基于CSS的背景图

试图用CSS background属性创建一个简单的图形，我遇到了一个无法解决的问题

使用一个x宽度和y高度的容器，我在其中绘制了每一条10%的父级宽度（基于数据的可变高度）的条，从背景位置0%开始，到位置90%结束，我应该有10条大小相等的条，完全适合容器是吗？不幸的是，这并不是我在页面上看到的结果，相反，我最终得到的容器将容纳11个条，而不是10个条

截图：

CSS如下所示：

background: linear-gradient(hsl(160,50%,20%), hsl(20,50%,20%)) 0% bottom no-repeat,
linear-gradient(hsl(160,50%,20%), hsl(20,50%,20%)) 10% bottom no-repeat,
linear-gradient(hsl(160,50%,20%), hsl(20,50%,20%)) 20% bottom no-repeat,
linear-gradient(hsl(160,50%,20%), hsl(20,50%,20%)) 30% bottom no-repeat,
linear-gradient(hsl(160,50%,20%), hsl(20,50%,20%)) 40% bottom no-repeat,
linear-gradient(hsl(160,50%,20%), hsl(20,50%,20%)) 50% bottom no-repeat,
linear-gradient(hsl(160,50%,20%), hsl(20,50%,20%)) 60% bottom no-repeat,
linear-gradient(hsl(160,50%,20%), hsl(20,50%,20%)) 70% bottom no-repeat,
linear-gradient(hsl(160,50%,20%), hsl(20,50%,20%)) 80% bottom no-repeat,
linear-gradient(hsl(160,50%,20%), hsl(20,50%,20%)) 90% bottom no-repeat hsl(0, 0%, 12%);

background-size: 10% 5%,
                 10% 10%,
                 10% 15%,
                 10% 20%,
                 10% 25%,
                 10% 30%,
                 10% 35%,
                 10% 40%,
                 10% 45%,
                 10% 50%;

背景大小

仅用于测试目的，将在最终代码中通过JavaScript进行设置/更新

所以问题是，我做错了什么，或者不理解我使用的方法？按照我的逻辑，在10%宽度的0%位置有一个条意味着下一次从10%到20%填充0%到10%之间的空间。。从90%到100%

---

使用：Firefox 38.0.5搭配时尚的1.4.3

您看到的问题是，当以百分比形式给出时，

背景位置在CSS中如何工作。以下是关于基于百分比的背景位置的说明：


水平偏移的百分比相对于（背景定位区域的宽度-背景图像的宽度）。垂直偏移的百分比相对于（背景定位区域的高度-背景图像的高度），其中图像的大小是“背景大小”给定的大小

例如，如果值对为“0%0%”，则图像的左上角通常与框的填充边的左上角对齐。“100%100%”的值对将图像的右下角放置在区域的右下角使用“75%50%”的值对，将图像上75%横穿和50%向下的点放置在区域上75%横穿和50%向下的点上。

（重点是我的）

如上所述，如果我们将位置指定为
10%bottom
（相当于
10%100%
），则背景图像的放置方式实际上是将图像上10%的点放置在包含框上10%的点上

现在，我们假设这个盒子是100px x 100px。因此，容器盒上的10%将为10px，图像上的10%将为图像上的1px标记（因为背景大小设置为容器大小的10%）。因此，图像实际上位于容器内的9px处，因此容器上的10px和图像上的1px是同一点。这使得第二个图像与第一个图像重叠1px。类似地，第三个图像将与第二个图像重叠2px，以此类推

使用相同大小的多个背景图像时计算位置的规则是：


第n个元素的背景位置

=100%*（n-1）/（图像总数-1） 对于Y轴，没有问题，因为它们都位于100%，因此图像的底部将与容器的底部匹配

div{
背景：线性梯度（hsl（160,50%，20%），hsl（20,50%，20%））0%底部不重复，线性梯度（hsl（160,50%，20%），hsl（20,50%，20%））11.11%底部不重复，线性梯度（hsl（160,50%，20%），hsl（20,50%，20%））22.22%底部不重复，线性梯度（hsl（160,50%，20%），hsl（20,50%，20%））33%底部不重复，线性梯度（hsl）（160,50%，20%），hsl（20,50%，20%）44.44%底部不重复，线性梯度（hsl（160,50%，20%），hsl（20,50%，20%）55.55%底部不重复，线性梯度（hsl（160,50%，20%），hsl（20,50%，20%）66.66%底部不重复，线性梯度（hsl（160,50%，20%），hsl（20,50%，20%）77.77%底部不重复，线性梯度（160,50%，20%），hsl（160,50%，20%）（20,50%，20%））88.88%底部不重复，线性梯度（hsl（160,50%，20%），hsl（20,50%，20%））99.99%底部不重复hsl（0,0%，12%）；
背景尺寸：10%5%、10%10%、10%15%、10%20%、10%25%、10%30%、10%35%、10%40%、10%45%、10%50%；
最小高度：200px；
宽度：600px；
}

---

我暂时接受这个答案，尽管我仍然觉得它的布局方式非常违反直觉，谢谢。@EntarraDe'Lacord：绝对正确，它非常违反直觉，但它符合规范，并且在新版本中没有建议的更改。所以我想我们不得不接受它。