1

我创建了方形图像并将其用作 div 的重复背景图像。

https://jsfiddle.net/cethbqog/2/

我将其应用于：

background-size: 5% auto;

我想这将是连续 20 个单元格，但它没有发生。有人可以帮我吗？

4

2 回答 2

0

如果你希望它是连续 20 个单元格，你应该给容器一个 400 像素的宽度，而不是 412 像素。

.container {
  width: 400px;
  padding-bottom: 30%;
  background: rgba(0,0,0, .4) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAA3SURBVEhL7cwxEQAgDMVQXP+tNYedKmDBQEbY8u6yZnX3Xr84R86Rc+QcOUfOkXNUVSfJvC9zAWrdZxj51zBJAAAAAElFTkSuQmCC);   
  background-size: 5% auto;
}

编辑

因此，您要做的是使背景图像在 x 轴上始终具有 20 个单元格，而它是可扩展的，并且高度应始终为 = 宽度。所以这很难实现，我认为背景图像。我能想到的是只用一个正方形做一个 png 或 svg，然后将其作为背景图像插入 20 次，并在 y 轴上重复。通常你不能设置固定数量的背景重复，但我在这里找到了一个小技巧： repeat css background image a set number of times（它在 IE9 和更早版本中不起作用）

background-image: url('square.png'), 
                  url('square.png'),
                  url('square.png');
background-repeat: repeat-y, 
                   repeat-y,
                   repeat-y;
background-size: 5% auto, 
                 5% auto, 
                 5% auto;
background-position: left top,
                     5% top,
                     10% top;

所以我不能保证你这会奏效，但你至少可以尝试一下:)

于 2015-12-08T10:17:18.020 回答
0

稍作修改即可实现，请查收

.container {
  width: 420px;
  padding-bottom: 30%;
  background: rgba(0,0,0, .4) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAXCAYAAADgKtSgAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAA3SURBVEhL7cwxEQAgDMVQXP+tNYedKmDBQEbY8u6yZnX3Xr84R86Rc+QcOUfOkXNUVSfJvC9zAWrdZxj51zBJAAAAAElFTkSuQmCC);   
  background-size: 5.1% auto;
}

于 2015-12-08T10:23:46.123 回答