Question

我想把类中的背景图像作为列表项：

<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class= "horizdotted" </li>
</ul>

这是CSS

.horizdotted {
background-image: url("images/horizdotted.png");
background-repeat:no-repeat;}

这在任何浏览器中都不起作用......看来我必须在LI中至少有一些信息（背景图像除外）。所以，我制作了一个白色像素，并尝试了另一种方式：

<ul>
<li> Stuff </li>
<li> More Stuff </li>
<li class= "horizdotted"><img src="images/pixel.png" alt="teeny pixel" /> </li>
</ul>

相同的CSS。这适用于Chrome和Firefox，但不适用于IE。我不能，为了我的生活，让它在IE中工作。如果可以的话请帮忙！！这是第二种方式Chrome中的图像（带有小像素）。 [东西，更多东西，无序列表中的虚线] http://www.flickr.com/photos/77703125@N07/8321020892/in/photostream/

Answer 1

在css中设置宽度和高度

.horizdotted {
  background-image: url("images/horizdotted.png");
  background-repeat:no-repeat;
  width:50px;
  height:50px;
 }

根据您想要的图像大小设置此属性。

Answer 2

jsFiddle for IE

您需要在li中添加内容，以便显示内容。此外，您的问题中的li语法错误。它缺少一个右括号>符号。在类名的等号后面也有一个空格。

HTML：

<ul>
  <li> Stuff </li>
  <li> More Stuff </li>
  <li class="horizdotted">Some stuff to view background.</li>
</ul>

CSS：

.horizdotted {
  background-image:url(http://placehold.it/500x17/00ff00);
  background-repeat: no-repeat;
}

jsFiddle for IE: No CSS

此外，由于它只是一个想要显示的虚线，因此不需要CSS：

HTML：

<ul>
  <li> Stuff </li>
  <li> More Stuff </li>
  <li>-----------------</li>
</ul>

李的背景图像没有出现

2 个答案: