当 box-sizing 为 border-box 时，按百分比计算背景大小答案

【问题标题】：background-size by percentage when box-sizing is border-box当 box-sizing 为 border-box 时，按百分比计算背景大小
【发布时间】：2017-02-20 16:50:21
【问题描述】：

我正在尝试使用背景在 div 中创建网格。自然， background-size 属性是创建网格的好方法，其中 10% 的大小将在 div 中创建 10 个均匀分布的单元格，例如：

div{
 width:200px;
 border:solid 1px black;
 background-size: 10% 1px;
 background-image: linear-gradient(to left, gray 1px,  transparent 1px);
}

&lt;div&gt;x&lt;/div&gt;

但是，我还需要将 box-sizing 设置为“border-box”，否则该框占用的像素比通过 width 属性指定的要多。这会在 Chrome 中使用按百分比指定的背景大小造成各种破坏，例如：

div{background-color:white;}
#d1 { 
    width:200px;
    border:solid 1px black;
    background-size: 10% 1px;
    background-image: linear-gradient(to left, gray 1px, transparent 1px);
    padding:5px;
    box-sizing:border-box;
}
#d2 { 
    width:200px;
    border:solid 1px black;
    background-size: 10% 1px;
    background-image: linear-gradient(to left, gray 1px, transparent 1px);
    padding:5px;
}

<div id="d1">more than 10 cells</div>
<p>
<div id="d2">box is bigger than 200px</div>

请注意，顶部 div (d1) 中显示了超过 10 个单元格，尽管每个单元格都应该是 div 宽度的 10%。

这似乎只是一个 Chrome 问题，但如果有人对此有解决方案，请告诉我。

【问题讨论】：

grid，你的意思是背景图案，对吧？
background-size CSS 属性指定背景图像的大小。图像的大小可以完全限制或仅部分以保持其固有比例。 developer.mozilla.org/en/docs/Web/CSS/background-size
是的，我正在尝试创建一个自定义进度条，其中 bg 模式创建一个均匀划分的网格。然后我就可以使用js来改变网格密度。但我肯定想使用百分比来指定网格中的单元格宽度，因为进度条宽度也可能会改变。
了解如何。不知道为什么 :)...
Firefox 都正确呈现，对我来说看起来像是 Chromium 错误。

标签： css background-size border-box

【解决方案1】：

我承认我以前从未玩过这个东西，但看起来你需要考虑background-image 的1px 宽度。现在不要问我为什么，但它确实有效。用不同的百分比和宽度对其进行了测试。如果您需要为什么，而不仅仅是如何，您必须自己挖掘 W3C 的文档或等待更好的记录答案。

div { 
  background-color:white;
  width:200px;
  border:solid 1px black;
  background-size: calc(10% + 1px), 1px;
  background-image: linear-gradient(to left, gray 1px, transparent 1px);
  padding:5px;
  box-sizing:border-box;
}

div ~ div { 
  width:300px;
  }

<div>exactly 10%</div>
<p>
<div>also exactly 10%</div>

干杯！

【讨论】：

我第一次尝试使用10% - 1px，因为这对我来说很有意义。但在200px，它创建了 11 个盒子。更改% 和width 我意识到我需要+ 1px。确实很奇怪。
这在 Firefox 或 ie 中无法正常工作；有没有办法使它成为特定于 chrome 的解决方案，但将 10% 留给其他浏览器？
不确定，他们很少需要。我会搜索并找到方法:)。
没关系，可以通过JS:stackoverflow.com/questions/4565112/…

【解决方案2】：

检查进度条码。它是如何工作的？

.progress-bar{
background-color: blue;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
background-size: 40px 40px;
height: 40px;
width: 400px;
}

&lt;div class="progress-bar"&gt;&lt;/div&gt;

background-size: 40px 40px; 表示框的40px 宽度和40px 宽度。 两个width 工作如何更努力？ background-size 首先放置图像，然后放置差距。背景图像将从0 to 40px 开始，然后放置40px 间隙，然后是40px 图像。在完整的width 完成之前，它是无限的。看看你的第一个 sn-p background-size: 10% 1px; 浏览器使用 1px 宽度图像渲染总 width 10 gap。

注意：background-size 将在您设置background-image 时起作用。否则background-size 属性将不起作用。

希望对您有所帮助。

【讨论】：

【解决方案3】：

Andrei Gheorghiu 的回答非常好，但在所有浏览器中并不一致，并且对于某些分隔符位置有几个像素的偏差。无论如何，这是更一致的答案，似乎无处不在：

div { 
  background-color:white;
  width:200px;
  border:solid 1px black;
  background: repeating-linear-gradient(to left, red, red 1px, white 2px, white 10%);
  box-sizing:border-box;
}

div ~ div { 
  width:300px;
  }

<div>exactly 10 red separators</div>
<div>also exactly 10 red separators</div>

【讨论】：