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

【问题标题】：CSS multiple Background Images both repeat-xCSS多个背景图像都重复-x
【发布时间】：2015-03-03 19:18:08
【问题描述】：

我现在尝试在一个 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。

【问题讨论】：

repeat-x 到 50% 将是一个问题，因为您不能有条件端点（至少对于 CSS 2.1）。它只会继续水平重复。不幸的是，您需要通过叠加元素来实现这一点。
@JackPattishall 好的，谢谢你的澄清:(那么让我们玩两个 div....

标签： html css background-image background-repeat

【解决方案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);

【讨论】：

【解决方案2】：

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

这是demo in Jsfiddle

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

希望对你有帮助

【讨论】：

与我尝试的结果相同
感谢小提琴试图自己制作一个......但我的目标是一个图像从左边开始直到中心，第二个从中心开始直到右边框
不知道是不是只有一个div背景才能实现。重复用于您选择重复的轴。你不能停在你想要的地方（如果我是对的）。您可以尝试制作一个容器 div，然后在其中制作另一个 2，其中一个图像作为 bg 在每个 div 中放置您想要的 div。这是一个例子：link

【解决方案3】：

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

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

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

【讨论】：