css - 多个背景图片重复时可以交替吗？

Question

我正在尝试使用 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 被绘制在后面并因此被隐藏。

能否将多张背景图交替平铺？我不希望将图像组合为单个图像。我也不知道该元素的宽度，因此不可能通过多次指定同一图像来伪造重复。

Answer 1

您可以尝试将两个图像都设为两倍宽，并在左侧或右侧制作透明图像。还没有尝试过，但应该可行，但也许不是您正在寻找的完美解决方案？

另外，不确定您为什么不想重复 XXX 000 的 1 个组合图像？