Question

问题：同一张TD中如何可以容纳2张图像？我如何重叠第一个？

错误：图像不重叠，有时角色的图像打印在图块图像旁边，而不是重叠。

我将把这个小程序的笔链接到您，尝试随机生成此错误发生的不同时间。

自定义的第一部分之后，随机图将生成字符的位置。

我研究了这个错误，发现不是坐标问题（它们是使用此函数随机生成的）

function coordinate(){

    let rowCoord= map.length;
    let cellCoord = map[1].length;

    let coord = {
        row: Math.floor(Math.random() * rowCoord),
        cell: Math.floor(Math.random() * cellCoord)
    }

    return coord;  
};

// this function will place the character if the coordinates are ok. Else we have a callback to the same function.

function placeCharAndItem(char){

    let coord = coordinate();
    // with this if you choose a walkable table to spawn, this is random generated
    if(map[coord.row][coord.cell] === 0 ){
        place(coord, char);
    }
    else{
        placeCharAndItem(char);
    }
};

地图也是随机生成的。是这样的

map = [[1,1,1,1,0],
       [1,0,0,0,0],
       [1,0,1,1,1],
       [1,0,0,0,1],
       [1,1,1,0,1]]

这是让角色图像在右侧td产生的功能

function place(coord, char){
  var charImage = $("<img>").attr("src", char.image).addClass('char');
  var row = $($("#tableGame tr")[coord.row]);
  var cell = $($("td", row)[coord.cell]);
  cell.append(charImage);
};

谢谢:)

Answer 1

如果仅将两个图像放在一个表格单元格中，则默认情况下它们将一个接一个地显示，这就是HTML的工作方式。

要使两个图像重叠，您可以显式设置第二个图像相对于其父表单元格的位置。您可以使用CSS做到这一点：

将position: relative;应用于父级td；
应用：
```
position: absolute;
top: 0;
left: 0;
```
第二张图片（以及同一单元格中的所有下一张图片，如果您还有更多图片）。

请记住，第二个图像现在将超出标准HTML流程，它将不再影响单元格大小，而是将任何内容重叠。您可能需要显式设置像元大小。

您还可以使用JQuery动态设置此样式：

// Get your table cell and image somehow.
const $cell = $(...);
const $image = $(...);

$cell.css('position', 'relative');
$image.css({
    position: 'absolute',
    top: 0,
    left: 0,
});

或者使用普通的JS：

const cell = document.querySelector(...);
const image = document.querySelector(...);

cell.style.position = 'relative';
image.style.position = 'absolute';
image.style.top = 0;
image.style.left = 0;

表格内的图像重叠

1 个答案: