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

Question

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

以上格式正常重复，半价，半砖，中心，镜子分别

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

我做了什么

1. 采用 400px宽度和 400px高度

的分部

2. 使用Background-position:和Background-repeat:属性重复图片

3. 重复格式中repeat-x和repeat-y的图片。

4. 以符合400px height和400px width

的方式重复图像

5. 根据我的代码，如果我们想重复 4行中的图片，那么我们应该写 4个背景属性行

请仔细阅读Js Fiddle以便更好地理解。

我想要的是

1. 解决方案可以在 CSS 或 Jquery

2. 如果它在CSS中有一个解决方案：背景重复应该自动，即使增加了分区的高度。

3. 我不知道以镜像格式重复图像（如上所述的最后一张图片）。

请提出建议以使其完美。

注意：请原谅我糟糕的解释。请浏览Js小提琴文件（你会明白我想要的）。

Answer 1

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

对于 half-drop 模式，创建一个画面宽度为两倍的画布元素，并在画布上绘制图像，如下所示：

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元素设置为背景图像，请使用canvas.toDataURL()：

element.style.backgroundImage = 'url("' + canvas.toDataURL('image/png') + '")';

请查看此JsFiddle以获取完整的工作示例。

有关canvas元素的更多信息：Tutorial on MDN

Answer 2

我不确定this link是否可以帮助您，但您可以使用css转换来翻转/镜像图像。

Answer 3

有很多方法可以回答这个问题，但如果是我，我会把它作为一个重复的元素。我不确定你使用的服务器技术（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>

显然我离开了背景图像源，我只是举例说明如何设置定位。