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

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小提琴来更好地理解.

我想要的是什么

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

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

3. 我不知道以镜像格式重复图像(如上所述的最后一张图像).

请提出您的建议,使其完美.

注意:请原谅我的不良解释.请浏览Js小提琴文件(你会明白我想要的).

Answer 1

您可以使用 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()：

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

查看这个JsFiddle以获得完整的工作示例。

有关 canvas 元素的更多信息：MDN 上的教程