是否可以将多个位图图像堆叠在一起？ [关闭]答案

【问题标题】：Is it possible to stack multiple bitmap images on top of each other? [closed]是否可以将多个位图图像堆叠在一起？ [关闭]
【发布时间】：2015-02-04 16:52:10
【问题描述】：

我不是编码员，所以我只是想知道。

示例每张图片都将包含一块拼图，并具有空白/透视背景（允许分层效果）。

用户通过一个过程来构建拼图，并能够选择不同的部分。

当用户选择一个新的拼图并创建一个字符串时调用位图图像。字符串中的每个字母都调用一个位图图像，整个字符串本身就构成了用户的谜题。

以前做过吗？什么可以用来建造这个？

编辑：我想知道，对于一个包含数千张图片且每张图片都被调用的网站，这种方法是否会为每张图片节省几 kb 并加快网站速度

【问题讨论】：

标签： java javascript jquery html css

【解决方案1】：

这当然是可能的。要求：

每个位图都必须支持透明度。 PNG 是当今的标准路线。
您需要使用 CSS 来覆盖每个图像。有几种可能的路线，但最有用的一种（我使用过的）称为“绝对定位”。使用它，您可以准确指定每个图像在区域内的位置。然后为每个图像选择重叠区域是一件简单的事情。

我在这里做了一个快速的概念验证：

http://jsfiddle.net/acy51ond/

.container {
    position: relative;
    border: 1px solid black;
    height: 150px;
    width: 150px;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
}

【讨论】：

这种覆盖 png 图像的方法是否会节省空间并加快网站速度，而不是为每个调用的图像提供完整的图像。想知道一个包含数千张图片的网站
没有。此堆叠仅用于显示目的；它与存储图像无关。如果你想节省空间，你想研究压缩。
感谢您澄清这一点

【解决方案2】：

玩这个想法很有趣。

仍然有点粗略，但这是一个开始。我这样做的方法是使用 PHP 创建页面，主要是初始化 JS 变量。

它可以容纳任意数量的部件。只需添加更多 id 为“p”的 div 加上 div 的数量。并扩展数组并创建图像。

init() 例程获取所有 id 以“p”开头的 div。并将 div id 编号与 p[] 数组中的位置交叉引用。这样，只要其他 div id 不以 p 开头，它就会自动扩展，并且其他 div 不会影响编码。默认样式也在这里初始化。 div 不需要 CSS（只需 HTML）。可以在 init 例程中将 div 添加到 HTML

要完成它，您需要添加一个函数来在例程的 toggle() 中选择拼图。

这是经过测试的代码。只需复制并粘贴到一个 html 文件中，保存图像，它就会起作用。

To see the page working Click Here

说明：
点击一个盒子，就会出现一块拼图
每次单击该框时，它都会打开和关闭该部分

<!DOCTYPE html>
<html lang="en">
<head>
<title>Overlapp Images</title>
<style type="text/css">
#contents{position:relative;height:500px;width:500px;}
</style>
</head><body><div id="contents">
<div id="p1" onclick="toggle(1)"></div>
<div id="p2" onclick="toggle(2)"></div>
</div>
<script type="text/javascript">
//<![CDATA[
var p = document.getElementsByTagName("div");
var onOff = new Array;
onOff.push(0);
var xref = new Array;
xref.push(0);
var width = ['100px','73px','100px'];
var height = ['100px','100px','73px'];
var t = ['100','0px','80px'];
var left = ['','15px','0px'];
function init(){
var did='';
var ndx=0;
  for (var div=0; div<p.length; div++){
    did = p[div].getAttribute("id");
    if (did != null){
      if (did.substring(0,1) == "p"){
        ndx = parseInt(did.substring(1));
        p[div].style.border = '1px solid #000';
        p[div].style.width = width[0];
        p[div].style.height = height[0];
        p[div].style.top = t[0] * (ndx - 1) + 'px';
        p[div].style.left = left[0];
        p[div].style.position = 'absolute';
        onOff.push(0);
        xref.push(ndx);
      }
    }
  }
}
console.log(xref);
function toggle(id){
  if (onOff[id]!=1){
    p[xref[id]].style.backgroundImage = 'url(puzzle' + id + '.png)';
    p[xref[id]].style.border = 0;
    p[xref[id]].style.width = width[id];
    p[xref[id]].style.height = height[id];
    p[xref[id]].style.top = t[id];
    p[xref[id]].style.left = left[id];
    onOff[id]=1;
  }
  else{
    p[xref[id]].style.backgroundImage = '';
    p[xref[id]].style.border = '1px solid #f00';
    p[xref[id]].style.width = width[id];
    p[xref[id]].style.height = height[id];
    p[xref[id]].style.top = t[id];
    p[xref[id]].style.left = left[id];
    onOff[id]=0;
  }
}
window.onload = init;
//]]></script>
</body></html>

【讨论】：

您可以使用的拼图图片数量没有限制。选择放置哪个图像的函数会处理这个问题。
对不起，我的意思是图像需要相互叠加，就像上面的例子一样。
没问题，把var t = ['100','0px','80px']; var left = ['','15px','0px'];的位置改一下就可以了，因为top和javascript保留字冲突。我只是想表明它是灵活的，当它们不在彼此之上时，您可以看到正在发生的事情。您可以根据 t 和 left 数组中设置的值将它们放置在任何位置。