无论如何反过来重复背景图像？

Question

假设我有这样的背景：

正常的重复背景看起来像这样：

现在我希望背景图像的反向重复应该如下所示：

即使可能再次反复重复：

---

无论如何，第三个选项是不必要的因为我们可以通过拍摄重复图像来制作

Answer 1

尝试这种类型的图像，以便获得与上一张图片中提到的交叉相关的外观

Answer 2

我认为css没有正确的方法。

最简单的方法是编辑你的照片：

然后重复它。

Answer 3

可以为一个div添加多个背景。但是没有背景转换属性，因此不支持多个背景。

---

我不确定这对你是否有用，但你可以使用:after psuedo-class：

div
{
    width: 400px;
    height: 200px;
    background: url('http://placehold.it/400x200'); 
    background-repeat: no-repeat;
    position: relative;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}


div:after
{
    content: '';
    display: block;
    position: absolute;
    width: 400px;
    height: 200px;
    background: url('http://placehold.it/400x200');   
    background-repeat: no-repeat;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);

    top: -200px;
}

第二个背景被重新反转并且第一个背景被反转。当然，您可以根据自己的意愿进行编辑。

jsFiddle 2 backgrounds

你甚至可以用3个背景做到这一点

jsFiddle 3 backgrounds

---

我希望你能用到这个！

Answer 4

可以翻转image once with CSS，但是css3不支持（afaik）交替重复的背景图像。

您必须使用您发布的第二张图片作为背景。这包含了你想要重复的整个模式。

Answer 5

仅限Firefox，您可以使用-moz-element

 <div class="repeated-background"></div>
 <div id="mybackground">
   <img src="myimage.png" />
   <img src="myimage.png" class="vflip" />
 </div>

的CSS：

.repeated-background {
  background: -moz-element(#mybackground) repeat;
}

.vflip {
    -moz-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}

但这并不是一种理智的方式来解决问题：）