2

我正在尝试使用背景在 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);
}
<div>x</div>

但是，我还需要将 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 问题，但如果有人对此有解决方案，请告诉我。

4

3 回答 3

1

我承认我以前从未玩过这个东西，但看起来你需要1px考虑background-image. 现在不要问我为什么，但它确实有效。用不同的百分比和宽度对其进行了测试。如果您需要为什么，而不仅仅是如何，您将不得不自己挖掘 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>

干杯!

于 2017-02-20T17:05:15.723 回答
0

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>

于 2017-02-23T17:21:05.527 回答
0

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

.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;
}
<div class="progress-bar"></div>

background-size: 40px 40px;这意味着盒子的40px宽度和40px宽度。两个如何width更努力地工作？ background-size首先放置图像，然后放置间隙。背景图像将开始0 to 40px然后放置40px间隙然后40px图像。在完全完成之前，它是无限width的。看看你的第一个片段浏览器使用宽度图像background-size: 10% 1px;渲染10个间隙。width1px

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

希望这有帮助。

于 2017-02-20T17:32:02.003 回答