Question

我有一个菜单列表：

<ul>
  <li class="marked">First item</li>
  <li>Second much longer than first item</li>
</ul>

我想在item.marked上面有一个图像标记，width将是文本宽度的100％。图像必须拉伸才能完全可见。 Height是不变的。

这可以通过CSS和IE兼容性来完成吗？

Answer 1

 <style type="text/css">
    .selected {
       background:url("example.png") no-repeat 0 100%;
    }
 </style>

Answer 2

更改列表项背景的解决方案（可以调整以更改图像）：

1。仅限CSS，持久性，适用于当前版本的浏览器（不适用于IE8及更早版本） - DEMO。

HTML：

<ul>
    <li>
        <input type="radio" name="s" id="o1" checked>
        <label for="o1">First item</label>
    </li>
    <li>
        <input type="radio" name="s" id="o2">
        <label for="o2">Second much longer than first item</label>
    </li>
</ul>

相关CSS：

ul input[type=radio] {
    display: none;
}
input[type=radio]:checked + label {
    background: lightblue;
}

如果您想在所选项目上方添加图片（带有img标签），则可以像this demo一样进行调整。

HTML：

<ul>
    <li>
        <input type="radio" name="s" id="o1" checked>
        <label for="o1">First item
            <img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg">
        </label>
    </li>
    <li>
        <input type="radio" name="s" id="o2">
        <label for="o2">Second much longer than first item
            <img src="http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg">
        </label>
    </li>
</ul>

并添加以下CSS：

label img {
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
input[type=radio]:checked + label img {
    display: block;
}

如果您不想使用img标记，则可以对伪元素使用background-image并将background-size设置为100% 100% ，就像this demo一样。 HTML与第一个演示中的HTML相同，您还需要在CSS中使用它：

label {
    position: relative;
}
input[type=radio]:checked + label:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    position: absolute;
    background: url(http://upload.wikimedia.org/wikipedia/commons/5/5b/Supernumerary_rainbow_03_contrast.jpg);
    background-size: 100% 100%;
    content: '';
}

2。仅限CSS，非持久性（当您单击页面上的其他位置时列表项不会保持选中状态），适用于IE8（以及IE7，但您必须将鼠标悬停在文字以查看更改） - DEMO。

HTML：

<ul>
    <li><a href="#" tabindex="1">First item</a></li>
    <li><a href="#" tabindex="1">Second much longer than first item</a></li>
</ul>

具有恒定高度和容器宽度的标记图像

2 个答案: