Question

此JS代码尝试通过将其顶部和左侧属性设置为从sigImg元素的td获取的值来定位图像元素getBoundingClientRect()，以便图像覆盖{{1} }元素，但页面显示的图像距离td.signLabel元素的左侧太远，太远到底部。

知道为什么以及如何使图像覆盖td元素？感谢

td

let w = window.open();
let doc = w.document;
doc.write(html);
doc.close();

let sigImg = new Image();
sigImg.src = signature;
sigImg.id = 'sign';
sigImg.style.position = 'absolute';

let bounds = doc.querySelector('td.signLabel').getBoundingClientRect();
let top = bounds.top;
let left = bouds.left;

sigImg.style.top = top + 'px';
sigImg.style.left = left + 'px';
sigImg.style.backgroundColor = "yellow"; //for illustration
doc.body.appendChild(sigImg);

Answer 1

将图像放入单元格，将其设置为绝对值。

＆＃13;

td img {
position: absolute;
  opacity: .2;
}

＆＃13;

<table>
  <tbody>
    <tr>
      <td>This is cell</td>
      <td>This is cell</td>
      <td>This is cell</td>
    </tr>      
    <tr>
      <td>This is cell</td>
      <td><img src="http://placekitten.com/g/200/300" /> This is image
</td>
      <td>This is cell</td>
    </tr>      
    <tr>
      <td>This is cell</td>
      <td>This is cell</td>
      <td>This is cell</td>
    </tr>      
  </tbody>
</table>

＆＃13;

图像的绝对位置

1 个答案: