css - 複数の背景画像を繰り返すと交互に表示されますか?

Question

CSS を使用して、複数の背景画像を交互にタイル表示しようとしています。これが私が試みていることの本質であり、2つの小さな正方形の画像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、それ自体に隣接して繰り返されているように見えます。これにより、2 番目の背景レイヤーYが後ろに描画され、隠れてしまいます。

複数の背景画像を交互に並べることはできますか? 複数の画像を 1 つの画像として結合することは避けたいと思います。また、要素の幅もわからないため、同じ画像を複数回指定して繰り返しを偽造することはできません。

Answer 1

あなたが試すことができるのは、両方の画像を2倍の幅にし、左側または右側のどちらかを透明な画像にすることです。試したことはありませんが、うまくいくはずで、探していた美しいソリューションではないでしょうか?

また、XXX 000 の 1 つの結合された画像を繰り返したくない理由がわかりませんか?