反正有没有反向重复背景图像？答案

【问题标题】：Is there anyway to inversly repeat the background-image?反正有没有反向重复背景图像？
【发布时间】：2013-12-03 18:09:29
【问题描述】：

假设我有这样的背景：

而正常的重复背景是这样的：

现在我希望背景图像的反向重复应该是这样的：

即使可能再次像这样反向重复：

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

【问题讨论】：

我不得不说不（我什么都不知道），但您可以将背景与它的 v 翻转对应物一起存储并重复。当然，它会使图像的有效负载加倍.. 拥有 imo 将是一个不错的 CSS 背景功能......总是欢迎更多具有背景图像的功能:)

标签： css

【解决方案1】：

试试这种类型的图片，这样你就会得到你在上一张图片中提到的交叉相关的外观

【讨论】：

【解决方案2】：

我认为 css 没有合适的方法。

最简单的方法可能是像这样编辑图片：

然后重复一遍。

【讨论】：

是的，我当然可以这样做，但是如果图像的高度太大怎么办？我必须复制太长的图像并应用...
大是什么意思？大到什么程度？
是的，但是如果图像是以前的两倍，这究竟会给您带来什么问题？
好吧，如果原始图像的高度是 1000 像素，那么重复它会产生 2000 像素高的图像，这实际上也是下载大小的 2 倍。这无论如何都不是最优的。

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

我希望你能用这个！

【讨论】：

【解决方案4】：

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

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

【讨论】：

我的img链接的漂亮副本;P

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

但这并不是一种真正理智的处理方式:)

【讨论】：