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 变为 set/updated。

所以问题是，我做错了什么，或者不了解我正在使用的方法？根据我的逻辑，在 10% 宽度的 0% 位置有一个条形意味着它填充 space 0% 到 10% 下一个从 10% 到 20% .. 从 90% 到 100%

使用：带有 Stylish 1.4.3 的 Firefox 38.0.5

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轴）时计算位置的规则是：

background-position of nth-element = 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>

CSS 基于背景的图表

CSS background based graph

css

background-image