我想将 li 元素符号更改为图像背景，但它不起作用并且图像不显示。 li 背景的相同图像不显示。根据 W3Validator，我的 HTML 代码是正确的。那为什么我的 HTML li 不工作？
如何让我的 li 在图像中显示？
我使用了这个代码。
.heading{
font: bold 11px verdana;
color:#525252;
}
.altheading{
font: bold 14px verdana;
color:#C70C1F;
}
.bodies{
font: 10px verdana;
color:#303030;
}
.gheading{
font: 12px MS Reference Sans Serif, Tahoma;
color:#335784;
}
.gbodiesR{
font: 12px MS Reference Sans Serif, Tahoma;
color:#C70C1F;font-weight: 450;
}
.gbodiesG{
font: 12px MS Reference Sans Serif, Tahoma;
color:#006600;
font-weight: 450;
}
li.cross{
list-style-image: url('https://shivkumar.in.net/Cross.jpg'); padding: 0 0 0 10px;
}
li.tick{
list-style-image: url('https://shivkumar.in.net/tick.gif'); padding: 0 0 0 10px;
}
.phis_ico{
background-image:url("https://shivkumar.in.net/phish914.jpg");
background-repeat:no-repeat;
background-position:right;
opacity: 1;
filter: alpha(opacity=80);
}<table bgcolor="#D4281E" align="center" width="100%" border="0"
cellpadding="0" cellspacing="2">
<tr>
<td>
<table bgcolor="#FFF" width="100%" border="02"
cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0"
align="center" width="100%" class="phis_ico">
<tr>
<td height="8" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="altheading" valign=
"center" align="center">
<u>Top Title</u>
</td>
</tr>
<tr>
<td height="10" colspan="2"></td>
</tr>
<tr>
<td colspan="2" class="gheading" valign=
"center" align="center">
<p align="justify" style="padding: 0 10px 0 10px;">
please help bepowbis my code
</p>
</td>
</tr>
<tr>
<td height="10" colspan="2"></td>
</tr>
<tr>
<td class="gbodies">
<li class="cross">
</td>
<td align="left" class="gbodiesR">
I am red cross paragraph
</td>
</tr>
<tr>
<td height="8" colspan="2"></td>
</tr>
<tr>
<td class="gbodies">
<li class="cross">
</td>
<td align="left" class="gbodiesR">
I am red cross paragraph
</td>
</tr>
<tr>
<td height="8" colspan="2"></td>
</tr>
<tr>
<td class="gbodies">
<li class="cross">
</td>
<td align="left" class="gbodiesR">
I am red cross paragraph.
</td>
</tr>
<tr>
<td class="gbodies">
<li class="cross">
</td>
<td align="left" class="gbodiesR">
I am red cross paragraph
</td>
</tr>
<tr>
<td height="8" colspan="2"></td>
</tr>
<tr>
<td class="gbodies">
<li class="tick">
</td>
<td align="left" class="gbodiesG">
I am green paragraph
</td>
</tr>
<tr>
<td height="8" colspan="2"></td>
</tr>
<tr>
<td class="gbodies">
<li class="tick">
</td>
<td align="left" class="gbodiesG">
I am green paragraph
</td>
</tr>
<tr>
<td height="8" colspan="2"></td>
</tr>
<tr>
<td class="gbodies">
<li class="tick">
</td>
<td align="left" class="gbodiesG">
I am green paragraph
</td>
</tr>
<tr>
<td height="38" colspan="2"></td>
</tr>
<tr>
<td colspan="2" align="center">
<a href="#"><img src=
"https://unionbankonline.co.in/pics/Conti3.jpg"
border="0" id="continue" /></a>
</td>
</tr>
<tr>
<td height="28" colspan="2"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
最佳答案
首先，我在您的 HTML 代码中没有看到无序列表。如果没有列表，则没有<li>元素来呈现您的图像。
如果您的目标是拥有两个列表(一个带有您的 Cross.jpg，一个带有您的 tick.gif)，那么 list-style-image 应该附加到您的 <ul>标签，不是你的 <li>标签。所以你的 CSS 看起来像:
ul.cross {
list-style-image: url('https://shivkumar.in.net/Cross.jpg');
padding: 0 0 0 10px;
}
ul.tick {
list-style-image: url('https://shivkumar.in.net/tick.gif');
padding: 0 0 0 10px;
}
您的 HTML 看起来像这样:
<ul class="cross">
<li>List Item Here</li>
<li>List Item Here</li>
<li>List Item Here</li>
</ul>
<ul class="tick">
<li>List Item Here</li>
<li>List Item Here</li>
<li>List Item Here</li>
</ul>
如果您尝试在不同的列表项上使用不同的图像，您将需要为每个创建背景图像:在这种情况下，您的 CSS 将如下所示:
ul {
list-style: none;
}
li.cross {
background: url('https://shivkumar.in.net/Cross.jpg')no-repeat;
}
li.tick {
background: url('https://shivkumar.in.net/tick.gif')no-repeat;
}
你的 HTML 看起来像这样:
<ul>
<li class="cross"></li>
<li class="tick"></li>
</ul>
编辑:刚刚扩展了您的代码段并看到了 <li>嵌套在您的 <table> 中的标签.这不是 valid HTML . <li>元素应该是 child
<ul>或 <ol>元素。
关于Html CSS 列表元素符号到图像不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52447436/