如何在td中显示背景图像，而不显示文本？

Question

CMS将网站菜单放在表格中。

我已经对其进行了更清晰的编辑。...

“输入” HTML并不是很有帮助，它是： <div id="hdr">#HMAINS#</div>

CMS用菜单替换了上面的＃HMAINS＃，该菜单在具有“ hmains”类的简单表中构造。

页面源代码如下： HTML <table border="0" cellpadding="0" cellspacing="0" class="hmains"> <tbody><tr> <td......></td> ... <td class="hmains"><a href="https://ss.smile-nz.com/~qenew1/" class="hmains">Logo</a></td> ... </table>

我想在其中一个单元格中放置背景图像，而不显示文本。即用图片链接替换文本链接。

除非我转到JS，否则无法直接更改td，该表由CMS构建。...

我希望有一些聪明的CSS，可以让我禁止显示特定td中的文本？

下面的css选择该td并添加图像

CSS

#hdr td:nth-child(5) {
    width: 50px;
    height: 76px;
    background-image: url(images/QE_Logo_edit.png);
    background-repeat: no-repeat;
    color: rgba(255, 255, 255, 0);
}

在开发工具中，颜色在预期的td中显示为透明，但是插件插入的“徽标”文本仍然可见吗？

Answer 1

只需在td内使用<img src='...'>标签插入图像

Answer 2

删除文本，然后将图像标签添加为<img src=''>

Answer 3

如果您想导航到其他页面或使图像可点击，只需将img标签添加到td标签中

<td>
<a href="your link">
<img border="0" alt="alt_text" src="image_src" width="100" height="100">
</a>
</td>

Answer 4

我认为有些人错过了由外部源控制表格HTML的观点，因此我无法直接更改td标签。我怀疑无法通过CSS更改td内的文本，因此只能将其放置在这种情况下，在这种情况下，我按如下方式在JS中进行了操作（记住有一个父div id ='hdr'）：

            <script> /***  remove 'logo' text from menu **/
            document.getElementById('hdr').getElementsByTagName('td')[4].innerHTML = "";
        </script>

全部在学习曲线中：-）

Answer 5

在 td 标签中使用内联样式。

var DDlist = document.getElementById("models");
while(DDlist.length>0){DDlist.remove(0);}