背景翻转平铺使用Javascript [英] Background flipped tiling using Javascript

问题描述

我有一个背景图片，目前垂直重复，并以页面为中心。

I have a background image which currently repeats vertically and is centered on the page. Here's some ASCII art to describe the image, with left and right hand sides marked.

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

我想要

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

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

Now, I could create an image like the following one have have it repeat using CSS:

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

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

However, this image is already much bigger than I want it to be, so making it 2 times larger is out of the question (especially since I plan on having a retina version too!). I thought that doing this in Javascript could be a good compromise.

有谁知道一个JS库已经可以处理这个，或者指向我的资源

Does anyone know of a JS library that can already handle this, or else point me to a resource that would give me a decent head start?

感谢，

Tim

推荐答案

您可以在大多数浏览器上使用CSS执行此操作< a>，通过 转换 属性（对于旧的IE，后退过滤器）; 这里的文章。例如：

You can do this with CSS on most browsers, via the transform property (and for older IE, a fallback 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 （使用您的重力） | 来源

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

It even works back in IE6, thanks to the fallback filter. Wow. And of course, IE9 (transform is supported), Chrome, Firefox, Opera...

可能有点痛苦，可能需要绝对定位和负z指数，但...

Doing that for the background is likely to be a bit of a pain, probably requiring absolute positioning and a negative z-index, but...

这篇关于背景翻转平铺使用Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！