背景大小与背景重复计数明显偏差

Question

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

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

我应用了它：

background-size: 5% auto; 

而且我认为这将是20个细胞成一排，但它并没有发生。 任何人都可以帮助我吗？

Answer 1

如果你想要它是一个20个单元格，你应该给容器的宽度为400px而不是412px。

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

编辑

所以，你正在尝试做的是使背景图像总是有一个像20个细胞在x轴上，而它的可扩展性和高度应始终=宽度。所以这很难实现我认为与背景图像。我能想到的只是用一个正方形做一个png或svg，然后在y轴上重复插入20次作为背景图像。通常情况下，你不能设置的背景下，重复一个固定的数字，但似乎有一点的黑客这个我发现这里： 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; 

这样我就可以“T向你保证这会工作，但你至少可以尝试一下:)

Answer 2

Modified a bit to achieve, please check it

.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; 
 
}