Question

我有一个背景图像，目前垂直重复并以页面为中心。这里有一些用于描述图像的ASCII艺术，左右两侧都有标记。

----------
|        |
|        |
|L      R|
|        |
|        |
----------

我想让图像在整个浏览器窗口中重复，每次都沿着垂直边缘翻转图像：

----------------------------------------
|        ||        ||        ||        |
|        ||        ||        ||        |
|L      R||R      L||L      R||R      L|
|        ||        ||        ||        |
|        ||        ||        ||        |
----------------------------------------

现在，我可以创建一个像下面这样的图像，让它重复使用CSS：

--------------------
|        ||        |
|        ||        |
|L      R||R      L|
|        ||        |
|        ||        |
--------------------

然而，这个图像已经比我想要的要大得多，所以将它放大2倍是不可能的（特别是因为我计划也有视网膜版本！）。我认为在Javascript中这样做可能是一个很好的妥协。

有没有人知道可以处理这个问题的JS库，或者指向一个可以让我有一个良好开端的资源？

谢谢，

添

Answer 1

您可以使用most browsers上的CSS，transform属性（对于较旧的IE，后备filter）; article here。 E.g：

img.flipped {
    -moz-transform:    scaleX(-1);
    -o-transform:      scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform:         scaleX(-1);
    filter:            FlipH;
    -ms-filter:        "FlipH";
}

Live Example （使用您的gravatar） | Source

由于回退过滤器，它甚至可以在IE6中运行。哇。当然，IE9（支持transform），Chrome，Firefox，Opera ......

为背景执行此操作可能会有点痛苦，可能需要绝对定位和负z-index，但是......

Answer 2

您可以使用CSS3翻转图像，但它只能在现代浏览器中使用。

查看此问题和已批准的答案：Click Here

背景使用Javascript翻转平铺

2 个答案: