4

我有一个当前垂直重复并位于页面中心的背景图像。这是一些描述图像的 ASCII 艺术，标有左侧和右侧。

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

我希望通过每次沿垂直边缘翻转图像来在整个浏览器窗口中重复图像：

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

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

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

然而，这个图像已经比我想要的大得多，所以把它放大 2 倍是不可能的（特别是因为我也计划有一个视网膜版本！）。我认为在 Javascript 中执行此操作可能是一个很好的折衷方案。

有谁知道已经可以处理这个问题的 JS 库，或者指向我一个可以给我一个不错的开始的资源？

谢谢，

蒂姆

4

2 回答 2

0

您可以在大多数浏览器上通过transform属性使用 CSS 执行此操作（对于较旧的 IE，可以使用后备filter）；文章在这里。例如：

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

现场示例 （使用您的 gravatar） | 来源

由于后备过滤器，它甚至可以在 IE6 中使用。哇。当然，IE9（transform支持）、Chrome、Firefox、Opera……

为背景做这件事可能会有点痛苦，可能需要绝对定位和负 z-index，但是......

于 2012-11-08T10:25:52.893 回答
0

您可以使用 CSS3 来翻转图像，但它只适用于现代浏览器。

看看这个问题和批准的答案：点击这里

于 2012-11-08T10:28:48.377 回答