使用Javascript实现背景翻转平铺

Question

我有一张背景图片，目前在页面中垂直重复并居中显示。以下是一些ASCII艺术来描述这张图片，左右两侧已标记。

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

我希望图片在整个浏览器窗口中重复出现，每次沿垂直边翻转一次：

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

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

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

然而，这张图片已经比我想要的大很多了，所以把它放大两倍是不可能的（尤其是因为我计划也有视网膜版本！）。我认为用JavaScript实现可能是一个不错的折中办法。

有人知道已经可以处理这个问题的JS库吗？或者指向一个能够给我一个不错起点的资源？

谢谢，

蒂姆

- tarmes

---

你想使用JavaScript翻转图像吗？ - Priyank Patel

Answer 1

你可以通过大多数浏览器上的CSS，使用transform属性（对于旧版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，但是...

- T.J. Crowder

---

谢谢，那解决了翻转的问题。另一个问题现在是如何通过创建尽可能多的div来将其翻转到整个浏览器宽度... - tarmes

@tarmes：您可以查询窗口的宽度，以了解需要创建多少个img元素。或者您可以创建足够多的元素，使事物看起来足够宽（比如说，3,000像素）。创建并附加一个图像元素非常简单:var img = document.createElement('img'); img.src = "..."; img.className = "..."; document.body.appendChild(img);(或者您可以使用insertBefore与引用元素在其他位置插入)。 - T.J. Crowder

由于这个问题实际上有两个方面，翻转的问题已经在这里得到解决，我已在另一个问题中更详细地描述了位置问题：http://stackoverflow.com/questions/13287662/extending-a-background-using-javascript - tarmes

Answer 2

你可以使用CSS3来翻转图片，但这只适用于现代浏览器。

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

- iMoses