使用Javascript进行背景翻转平铺

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

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

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

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

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

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

然而，这张图片已经比我想要的大了很多，所以把它放大两倍是不可能的（特别是因为我也计划制作一个视网膜版本！）。我认为在Javascript中这样做可能是一个很好的折衷方案

有没有人知道JS库已经可以处理这个问题，或者告诉我一个可以给我一个良好开端的资源

谢谢

---

Tim

您可以通过属性（对于较旧的IE，使用回退

过滤器

）在CSS打开的情况下执行此操作。例如：

（使用您的gravatar）|

得益于回退过滤器，它甚至可以在IE6中工作。哇！当然，IE9（

transform

受支持）、Chrome、Firefox、Opera

---

在后台这样做可能会有点麻烦，可能需要绝对定位和负z索引，但是…

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

---

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

是否要使用javascript翻转图像？谢谢，这解决了翻转问题。另一个问题是，现在如何通过创建尽可能多的div来在整个浏览器宽度上翻转它，以实现目标…@tarmes：您可以查询窗口的宽度，它告诉您需要创建多少

img

元素。或者，您可以创建足够的内容，使其尽可能宽，因为您认为是合理的（例如，3000px的价值）。创建和附加一个图像元素很简单：

var img=document.createElement（'img'）；img.src=“…”；img.className=“…”；文件.正文.附件（img）

（或者您可以使用

insertBefore

，在其他地方插入一个引用元素）。因为这个问题实际上有两个方面，翻转的问题在这里已经解决了，所以我在另一个问题中更详细地描述了定位问题：

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