gpt4 book ai didi

javascript - 无法在图像上动态添加文字

转载 作者:太空宇宙 更新时间:2023-11-03 23:59:17 25 4
gpt4 key购买 nike

我正在使用 HTML5+Javascript 设计移动网页。我通过 javascript 动态添加了一个图像。但是当我尝试在该图像上动态设置文本时,它不起作用。

我希望文字显示在图像上。我的代码是;

  <script>
for(var i=0;i<5;i++) {
var ele = document.getElementById('container');
var table = document.createElement('table');
table.className = 'c1';
var tr = document.createElement('tr');
var td = document.createElement('td');
/* image added dynamically */
var img = new Image();
img.src = "Images/car.jpeg";
img.className = 'c3';
var txt = document.createTextNode('IE8');

td.appendChild(img);
img.appendChild(txt);
tr.appendChild(td);
table.appendChild(tr);
ele.appendChild(table);
}

<style> .img{height:50px;width:50px;}
.c1 {height:60px; width:100px;}
</style>
<body id='container'></body>

我尝试添加一个 div 组件,然后向其添加文本 + 背景图像。它也不起作用。

最佳答案

更好的选择是将图像设置为文本容器的 CSS image-background 属性。

<td style="background-image: url('path_to_image');">

一个不太好的技术是将文本放在容器上 float ,具有绝对位置(这需要 JS)和 z-index 大于图像元素。

关于javascript - 无法在图像上动态添加文字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17468926/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com