我正在尝试使用 CSS 交替平铺多个背景图像。这是我正在尝试的本质，有两个小方形图像 X 和 O:
background-image: url(images/X.png), url(images/O.png);
background-repeat: repeat-x, repeat-x;
这是期望的效果(为清楚起见添加了间距):
XXX OOO XXX OOO XXX OOO
XXX OOO XXX OOO XXX OOO
但是实际效果是这样的:
XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX
最前面的背景层 X 似乎与自身相邻重复，这导致次要背景层 Y 被绘制在后面并因此被隐藏。
能否将多张背景图交替平铺？我不希望将图像组合为单个图像。我也不知道该元素的宽度，因此不可能通过多次指定同一图像来伪造重复。
最佳答案
您可以尝试将两个图像都设为两倍宽，并在左侧或右侧制作透明图像。还没有尝试过，但应该可行，但也许不是您正在寻找的完美解决方案？
另外，不确定您为什么不想重复 XXX 000 的 1 个组合图像？
关于css - 多个背景图片重复时可以交替吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6221031/