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

Posted 2023-03-05

【中文标题】以不同样式重复多个图像作为背景

【英文标题】：Repeating Multiple Images As Background in different Styles

【发布时间】：2014-03-03 00:00:09

【问题描述】：

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

上面的格式是Normal Repeat、Half-Drop、Half-Brick、Center、镜像分别

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

我做了什么

取400px宽和400px高

的除法

使用Background-position: 和Background-repeat: 属性重复图像

分别以repeat-x和repeat-y的格式重复图像。

以适合400px height和400px width的方式重复图像

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

请通过Js Fiddle更好地了解。

我想要的是

解决方案可以是 CSS 或 Jquery

如果 CSS 中有解决方案：背景重复应该自动完成，即使我增加了分割的高度。

我不知道要以 镜像格式 重复图像（如上面提到的最后一张图像）。

请提出您的建议，使其完美。

注意：请原谅我的拙劣解释。请仔细阅读 Js Fiddle 文件（你会明白我想要什么）。

【问题讨论】：

请告诉我：在 Css 中是否可能......？如果没有，请分享一个您发现它可能对我有帮助的教程。

这是从数据库动态驱动的吗？ IE你能有一个重复的带有html的lop吗？

很容易实现，即使您希望在用户端处理图像变体。查看 CSS3 转换属性。

我认为您必须将图像作为重复元素并使用 CSS3 将它们翻转为镜像模式。

【参考方案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.toDataURL()：

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

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

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

【讨论】：

非常感谢.....!!!您能否给我任何参考链接以简要了解画布..？

我是画布概念的新手。我得到了我想要的确切解决方案。但我想知道每一行代码中发生了什么。你有空的时候能给我解释一下吗？

你是如何将图像转换成编码码的..？

@Sreeram 我添加了一个关于画布的教程链接，并在小提琴中添加了一些 cmets

【参考方案2】：

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

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