基于 CSS 背景的图表

Question

尝试使用 CSS 背景属性制作一个简单的图表，但我遇到了一个无法解决的问题。

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

截图:https://dl.dropboxusercontent.com/u/67967664/Bars.jpg

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

background-size 仅用于测试目的，将在最终代码中通过 JavaScript 设置/更新。

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

使用:Firefox 38.0.5 和 Stylish 1.4.3

Answer 1

您所看到的问题是由于以百分比形式给出时 background-position 在 CSS 中的工作方式所致。以下是spec的内容说的是基于百分比的background-position:

A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by ‘background-size’.

For example, with a value pair of ‘0% 0%’, the upper left corner of the image is aligned with the upper left corner of, usually, the box's padding edge. A value pair of ‘100% 100%’ places the lower right corner of the image in the lower right corner of the area. With a value pair of ‘75% 50%’, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.

(强调的是我的)

如上所述，如果我们将位置指定为 10% Bottom(相当于 10% 100%)，背景图像实际上会以这样的方式放置:图像上 10% 宽的点放置在包含框上 10% 宽的点处。

现在例如，让我们假设盒子是 100px x 100px。因此，容器框上的 10% 位于 10px 处，图像上的 10% 位于图像上的 1px 标记处(因为背景尺寸设置为容器尺寸的 10%)。因此，图像实际上会定位在容器内的 9px 处，因此容器上的 10px 和图像上的 1px 是同一点。这使得第二个图像与第一个图像重叠 1px。同样，第三个图像将与第二个图像重叠 2px，依此类推。

使用多个相同尺寸的背景图像(X轴)时计算位置的规则是:

• 第 n 个元素的背景位置 = 100% * (n-1)/(图像总数 - 1)

对于 Y 轴，没有问题，因为它们都定位在 100%，因此图像的底部将与容器的底部匹配。

div {
  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%)) 11.11% bottom no-repeat, linear-gradient(hsl(160, 50%, 20%), hsl(20, 50%, 20%)) 22.22% bottom no-repeat, linear-gradient(hsl(160, 50%, 20%), hsl(20, 50%, 20%)) 33.33% bottom no-repeat, linear-gradient(hsl(160, 50%, 20%), hsl(20, 50%, 20%)) 44.44% bottom no-repeat, linear-gradient(hsl(160, 50%, 20%), hsl(20, 50%, 20%)) 55.55% bottom no-repeat, linear-gradient(hsl(160, 50%, 20%), hsl(20, 50%, 20%)) 66.66% bottom no-repeat, linear-gradient(hsl(160, 50%, 20%), hsl(20, 50%, 20%)) 77.77% bottom no-repeat, linear-gradient(hsl(160, 50%, 20%), hsl(20, 50%, 20%)) 88.88% bottom no-repeat, linear-gradient(hsl(160, 50%, 20%), hsl(20, 50%, 20%)) 99.99% 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%;
  min-height: 200px;
  width: 600px;
}

<div></div>