Question

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

第一张图片应该从div的左上角高达50％开始。

第二个应该从div的中间到右端开始。

我尝试了以下内容：

.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%;
}

我的问题是只显示了image1。

Answer 1

尝试使用background: url('image1.png'), url('image2.png');代替background-image:

这是demo in Jsfiddle

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

希望它能够解决问题

Answer 2

为这样的任何元素设置两个背景图像

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 3

感谢Devilquest。我在一个div中有2个图像的“top repeat-x，bottom repeat-x”问题。适用于Chrome，在IOS上失败。交换到

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

现在在safari，iPhone等上工作正常

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

3 个答案: