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被绘制在后面并因此被隐藏。

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

score 0 · Accepted Answer

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

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

1 回答 1