CSS多个背景图像均重复-x

Question

我试图在一个div中同时获得多个背景图像两者必须重复-x。

第一个图像应从左上角开始，最高可达分区的50%。

第二个应该从分区右端的中间开始。

我尝试了以下方法：

.myDiv {
    background-image: url('image1.png'), url('image2.png');
    background-repeat: repeat-x, repeat-x;
    background-position: left top, center top;
    background-size: 50% 100%, 50% 100%;
}

我的问题是只显示了图像1。

Answer 1

为类似的任何元素设置两个背景图像

background: 
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);

Answer 2

尝试使用background: url('image1.png'), url('image2.png');而不是background-image:

这是Jsfidle 中的一个演示

您可以看到两个图像都出现了。

希望它能帮助

Answer 3

感谢Devilquest。我在一个分区中有两个图像的"顶部重复-x，底部重复-x"问题。在Chrome上工作，在IOS上失败。转换为

 background: url ();
 background-repeat: repeat-x, repeat-x;
 background-position: top , bottom;

现在在safari、iPhone等上运行良好。