Question

我使用<ul><li><a>实现了一个简单的标签导航，问题是仍然需要在每个标签上有几个“图层”。我的意思是，在我目前的实施中，我有：

-tab文本，<a>text</a>
- 在每个标签中，我都有一个标签图标图片，我将其<li>作为<li>的背景图片，

但我仍然需要：

-tab 分隔符图片（竖条图片）我打算放在<a>上，并将其放在左侧background-position: left，它是工作，但这个实现不在我在 jsfiddle 网站上显示的代码中，因为我在互联网上找不到合适的图像
-tab占据整个标签的背景图片，我不知道应该把这张图片放在哪里？

请检查＆amp;运行我的实现here on jsfiddle，在css代码中，我使用background-color而不是background-image来表达我想要实现的内容，但我需要使用background-image作为标签背景

我尝试了什么：

我尝试将{strong>标签背景图片放在<li>上，但它会隐藏已经在<li>，

图标图片

我尝试将标签背景图片放在<a>上，但鼠标悬停时它还会隐藏标签分隔图像

如何摆脱标签实施中的图层问题呢？（请不要建议我使用较少的图像，因为这个应用程序要求使用这些图像。）

（顺便说一下，我提到的所有图片都有鼠标“悬停”对应物）

Answer 1

如果您不想更改HTML，可以使用伪元素：

小提琴：http://jsfiddle.net/Pq7LC/39/

li:before{
    content: "";
    background: pink;
    width: 20px;
    height: 61px;
    display: block;
    position:absolute;
}
li:first-child:before{ /* Don't add image border before first li */
    content:none;
}

Answer 2

你可以用css做，不需要图像。

http://jsfiddle.net/Pq7LC/40/

希望它能帮到你:)。

使用<ul> <li>进行简单的选项卡实现，但如何设置选项卡背景图像？</li> </ul>

2 个答案: