Jquery 以不同样式重复多个图像作为背景

在我目前的项目中，最终用户将从他的计算机中选择任何图像，然后我们将以以下格式显示该图像

上述格式分别为正常重复，半滴，半砖，中间，镜像

因此，我开始研究CSS背景图像技巧。但我没有得到100%的解决方案

我所做的

以400px宽度和400px高度划分

使用

背景位置：

和

背景重复：

属性重复图像

分别以

repeat-x

和

repeat-y

格式重复图像

以符合

400px高度

和

400px宽度

根据我的代码，如果我们想在4行中重复图像，那么我们应该写4条背景属性行

为了更好地理解，请仔细阅读

我想要的是

解决方案可以是CSS或Jquery

如果CSS中有一个解决方案：即使我增加了分割的高度，背景重复也应该自动进行

我没有任何想法重复镜像格式的图像（如上所述）

请给出你的建议，使之完美

---

注意：请原谅我拙劣的解释。请浏览Js FIDLE文件（您将了解我想要什么）。

您可以使用JavaScript和canvas元素修改背景图像

对于“半挂”模式，创建一个宽度为图像两倍的画布元素，并在画布上绘制图像，如下所示：

context.drawImage(image, 0, 0, width, height);
context.drawImage(image, width, height / -2, width, height);
context.drawImage(image, width, height / 2, width, height);

对于镜像模式，请使用以下命令：

context.drawImage(image, 0, 0, width, height);
context.save();
context.scale(-1, 1);
context.drawImage(image, -width * 2, 0, width, height);
context.scale(1, -1);
context.drawImage(image, -width * 2, -height * 2, width, height);
context.scale(-1, 1);
context.drawImage(image, 0, -height * 2, width, height);
context.restore();

要将画布元素设置为背景图像，请使用

canvas.toDataURL（）

：

请看这个完整的工作示例

---

关于canvas元素的更多信息：

有多种方法可以回答这个问题，但如果是我，我会将其设置为重复元素。我不确定您使用的服务器技术（PHP或ASP）是什么，但我会设置一些if语句

如果其处于镜像模式：

.mirrorLeft {
        width:50%;
        position:aboslute;
        left:0;
        top:0;
        background-repeat:repeat-y;
}

.mirrorRight {
        width:50%;
        position:aboslute;
        right:0;
        top:0;
        min-height:100%;
        background-repeat:repeat-y;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

<div class="background">
    <div class="mirrorLeft"></div>
    <div class="mirrorRight"></div>
</div>

.mirrorLeft{
宽度：50%；
职位：居留；
左：0；
排名：0；
背景重复：重复-y；
}
A.mirrorRight{
宽度：50%；
职位：居留；
右：0；
排名：0；
最小高度：100%；
背景重复：重复-y；
-moz变换：scaleX（-1）；
-o变换：scaleX（-1）；
-webkit转换：scaleX（-1）；
转换：scaleX（-1）；
过滤器：FlipH；
-ms过滤器：“FlipH”；
}

---

显然，我把我们的背景图像源留下了，我只是给出了一个如何设置定位的示例。

请让我知道：在Css中是否可能。。。？如果没有，请分享一个教程，你发现它可能会帮助我。这是从数据库动态驱动？也就是说，你可以有一个包含html的重复lop。很容易做到，即使你想让用户端处理图像变体。查看CSS3转换属性。我认为您必须将图像作为重复元素，并使用CSS3在镜像模式下翻转它们。非常感谢。。。。。！！！你能给我一些参考链接来了解画布吗？我对画布的概念是新手。我得到了我想要的精确解。但我想知道每行代码中都发生了什么。你有空的时候能给我解释一下吗？以及你是如何将图像转换成编码的？@Sreeram我添加了一个关于画布的教程链接，并在小提琴上添加了一些注释

.mirrorLeft {
        width:50%;
        position:aboslute;
        left:0;
        top:0;
        background-repeat:repeat-y;
}

.mirrorRight {
        width:50%;
        position:aboslute;
        right:0;
        top:0;
        min-height:100%;
        background-repeat:repeat-y;
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}

<div class="background">
    <div class="mirrorLeft"></div>
    <div class="mirrorRight"></div>
</div>