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

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:

这是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

感谢恶魔探索。对于一个 div 中的 2 个图像，我遇到了“顶部重复-x，底部重复-x”的问题。在 Chrome 上工作，在 IOS 上失败。换到

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

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