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

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-only，持久，适用于当前版本的浏览器（不适用于 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 标签），那么您可以像在这个演示中一样对其进行调整。

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在伪元素上使用 a 并将其设置background-size为100% 100%，就像在这个演示中一样。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-only，不持久（当您单击页面上的其他位置时，列表项不会保持选中状态），适用于 IE8（也适用于 IE7，但您必须将鼠标悬停在文本上才能看到更改） -演示。

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>

相关CSS：

a:active, a:focus {
    outline: none;
    background: lightblue;
}