Question

我尝试使用下面的代码在表格单元格中添加图像作为背景图像，但它无法正常工作。

<tr><td style="background-image:url('search_images/Zyra.png')">Zyra</td></tr>

我尝试使用不同的引号而不使用url()，但在所有情况下只显示文字。

编辑：要发布我的PHP代码。

  echo "<td style='width:100%; background-image: url(search_images/".$row["champion"].".png)'>".$row["champion"]."</td>";

这适用于它显示带有文本的图像，除了它只显示一行，并且单元格大小适合文本而不是背景图像。

我希望行填充浏览器窗口的宽度，单元格大小为背景图像的大小。

Answer 1

您的代码应该可以正常工作，检查浏览器控制台是否有错误，如果没有找到图像，那么您可能会错误地输入图像路径。

如果提供的图像和HTML文件位于同一目录中，则可以使用background-image:url('./image.jpg');，否则需要从HTML页面的目录background-image: url('./firstDir/secondDir/image.jpg');开始填写完整路径。< / p>

以下是您的代码工作的一个工作示例：

＆＃13;

<table>
<tr>
    <td style="height:80px; width:100px; line-height:70px; background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJbUiuUbKuYmKJfS4dYY0XGtRCGmNTco916Tyfiuf84wkhuWSj); background-size: 100% 100%; color:#F00; font-weight:bold;">This is test</td>
</tr>
</table>

＆＃13;

Answer 2

确保在<table>和<tr>标记周围添加<td>标记（这是使代码段有效的原因）。如果您想要显示更多图像，也可以添加宽度和高度。

＆＃13;

td.bg{
  background-image:url('https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634_960_720.png')
}

＆＃13;

<table>
    <tr>
        <td class="bg">Zyra</td>
    </tr>
</table>

＆＃13;

Answer 3

您的代码没有任何问题。我的猜测是，因为您使用的是png文件，可能会为那些blank pixels生成白色背景。下面是一个示例，显示它有效。

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<meta charset="utf-8" />
</head>
<body>
    <table>
        <tr>
            <td style="background-image:url('https://i.stack.imgur.com/Np80G.jpg?s=48&g=1'); 
background-size: auto; background-repeat: no-repeat; 
color: white; font-weight: bold; padding: 20px;">              
                some text here
            </td>
        </tr>
    </table>
</body>
</html>

HTML-PHP：未显示背景图像

3 个答案: