英文:
How to add background image to a table header th cell
问题
我有一个HTML表格，我想为表格的每个<th>添加不同的背景图片，但背景图片没有显示出来。
我尝试以下的方式：
<tr>
<th>测试表头</th>
<th style="background: url('外部网址');">列 1 表头<br/>如何</th>
<th style="background: url('外部网址');">列 2 表头<br/>如何</th>
</tr>
但是图片没有显示出来。我还尝试了以下的替代方式：
<th style="background-image: url('外部网址');">列 1 表头<br/>如何</th>
英文:
I have a table in html and I want to add different background images to each <th> of the table, but the background image is not coming up
I tried by adding in following way
<tr>
<th>Test table header</th>
<th style="background: url("external url");" >Column 1 header <br/>How to</th>
<th style="background: url("external url");" >Column 2 header <br/>How to</th>
</tr>
But the image is not coming up.
Tried below alternative as well
<th style="background-image: url("external url");" >Column 1 header <br/>How to</th>
答案1
得分: 1
It should work using ' instead of "
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<th style='background: url("external url");' >Column 2 header <br/>How to</th>
<!-- end snippet --><th style='background: url("external url");' >Column 2 header <br/>How to</th>
英文:
It should work using ' instead of "
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<th style='background: url("external url");' >Column 2 header <br/>How to</th>
<!-- end snippet --><th style='background: url("external url");' >Column 2 header <br/>How to</th>
答案2
得分: 0
请使用单引号而不是双引号来包裹外部网址，因为您的样式参数已经使用了双引号：
<tr>
<th>测试表头</th>
<th style='background: url('外部网址');'>列1表头<br/>如何</th>
<th style='background: url('外部网址');'>列2表头<br/>如何</th>
</tr>
英文:
Try simple quote instead of double quotes for the external url, because you're style param already use double quotes :
<tr>
<th> Test table header </th>
<th style="background: url('external url');" >Column 1 header <br/>How to</th>
<th style="background: url('external url');" >Column 2 header <br/>How to</th>
</tr>
答案3
得分: 0
应该使用 background-image: url(外部网址);（不包括引号）：
<table>
<tr>
<th style="background-image: url(https://i.imgur.com/Q9GFjaY.jpeg);">列1标题 <br/>如何</th>
<th style="background-image: url(https://i.imgur.com/xohARva.png);">列2标题 <br/>如何</th>
</tr>
</table>
如果你仍然看不到它，也许你的单元格应该更大。
英文:
Should be working with background-image: url(external url); without the quotes:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<table>
<tr>
<th style="background-image: url(https://i.imgur.com/Q9GFjaY.jpeg);">Column 1 header <br/>How to</th>
<th style="background-image: url(https://i.imgur.com/xohARva.png);">Column 2 header <br/>How to</th>
</tr>
</table>
<!-- end snippet -->
If you still don't see it maybe your cells should be bigger
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论