Могут ли чередоваться несколько фоновых изображений при повторении?

Я пытаюсь поочередно расположить несколько фоновых изображений с помощью 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 быть оттянутым позади и таким образом скрытым.

Можно ли поочередно выложить несколько фоновых изображений? Я бы предпочел не объединять изображения в одно изображение. Я также не знаю, насколько широким будет элемент, поэтому подделать повторение, указав одно и то же изображение более одного раза, невозможно.

1 ответ

Что вы можете попробовать, так это сделать оба изображения в два раза шире, а с левой или правой стороны - прозрачное изображение. Не пробовал, но должно сработать, а может и не красивое решение, которое вы искали?

Кроме того, не уверены, почему вы не хотите повторить 1 комбинированное изображение XXX 000?

Другие вопросы по тегам