Question

我想将UICollectionView项目符号更改为图像背景，但是它不起作用并且图像无法显示。 li背景的相同图像未显示。根据W3Validator，我的HTML代码正确。那么为什么我的HTML li无法正常工作？

如何使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);
    
    }

Answer 1

首先，我在您的HTML代码中看不到无序列表。如果没有列表，则没有<li>元素可以渲染图像。

如果您的目标是拥有两个列表（一个包含Cross.jpg，一个包含tick.gif），则列表样式图像应附加到您的<ul>标签上，而不是{{1} }标签。因此您的CSS看起来像：

<li>

您的HTML如下所示：

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; 
  }

如果您试图在不同的列表项上允许使用不同的图像，则需要为每个列表创建背景图像：在这种情况下，您的CSS将如下所示：

<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>

，您的HTML将如下所示：

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;
  }

编辑：只需展开您的代码段，然后看到<ul> <li class="cross"></li> <li class="tick"></li> </ul>标签嵌套在您的<li>中。这不是valid HTML。 <table>个元素应该是以下元素的子元素 <li>或<ul>元素。

Answer 2

为确保您不会在另一个样式表中覆盖li样式，请在li.cross和li.tick类中添加以下内容

display: list-item;

请参阅：

li.cross{
    list-style-image: url('https://shivkumar.in.net/Cross.jpg'); 
    padding: 0 0 0 10px;
    display: list-item;
}

li.tick{
    list-style-image: url('https://shivkumar.in.net/tick.gif'); 
    padding: 0 0 0 10px;
    display: list-item;
}

编辑：

在您的网站上，您确实有一个冲突的样式规则，该规则隐藏了子弹头

如果您不想移动第二个css文件，请使用此答案中的修复程序在css类中覆盖该值。

请参阅以下gif文件：

Answer 3

请从您的答案中删除我的网站网址，我投了赞成票，但出于优先考虑或出于隐私考虑，我不想与任何人共享我的网站。请从您的答案中删除所有网址。

HTML CSS列表项目符号到图像不起作用

3 个答案: