多个背景图片重复时可以交替吗？
我正在尝试使用 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 被绘制在后面并因此被隐藏。
多个背景图片可以交替平铺吗？我不想将这些图像组合为单个图像。我也不知道元素的宽度，因此通过多次指定同一图像来伪造重复是不可能的。
I am trying to alternately tile multiple backgrounds images using CSS. Here is the essence of what I am trying, with two small square images X and O:
background-image: url(images/X.png), url(images/O.png);
background-repeat: repeat-x, repeat-x;
This is the desired effect (spacing added for clarity):
XXX OOO XXX OOO XXX OOO
XXX OOO XXX OOO XXX OOO
But this is the actual effect:
XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX
The foremost background layer, X, seems to be repeated adjacent to itself, which is causing the secondary background layer, Y to be drawn behind and thus hidden.
Can multiple background images be alternately tiled? I would prefer not to combine the images as a single image. I also don't know how wide the element will be, so faking the repeat by specifying the same image more than once is not possible.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您可以尝试将两个图像的宽度设置为两倍，并在左侧或右侧设置透明图像。还没有尝试过，但应该可行，但也许不是您正在寻找的完美解决方案？
另外，不确定为什么您不想重复 XXX 000 的 1 个组合图像？
What you could try is make both the images twice as wide and on either left or right side a transparent image. Haven't tried it, but should work and maybe not the beautiful solution you were looking for?
Also, not sure why you don't want to repeat 1 combined image of XXX 000?