我创建了方形图像,并将其用作div的重复背景图像。
https://jsfiddle.net/cethbqog/2/
我将其应用于:
background-size: 5% auto;
我以为这将是连续20个细胞,但这并没有发生。有人能帮我吗?
修改了一点实现,请检查一下
.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;
}
如果希望它是一行中的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;
}
编辑
所以,你要做的是让背景图像在x轴上总是有20个单元格,同时它是可缩放的,高度应该总是=宽度。所以这是很难实现的,我认为背景图像。我能想到的是做一个只有一个正方形的png或svg,然后在y轴上重复插入20次作为背景图像。通常你不能设置固定数量的背景重复,但我在这里发现了一个小技巧:将css背景图像重复一定次数(在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;
所以我不能保证这会起作用,但你至少可以尝试一下:)