使用CSS为背景图像设置LI元素的样式

Question

我正在尝试使用CSS生成的标签来显示标签下箭头的活动状态。我试图使用背景位置属性为悬停事件定位图像，但它会使图像超出标签的给定比例。
这是页面：http://thegoodgirlsnyc.com/holly/about。活动选项卡应如下所示：

CSS样式如下：

#example-one li.nav-one a.current, ul.one li a:hover {
background:url("images/tabarrow.png") no-repeat scroll center bottom #999933;
border-bottom:1px solid #666666;
color:#666666;
padding:4px 15p

如何让此图像显示在预定义背景的底部？这些选项卡将包含在多个位置，具有不同的文本长度，因此它们应该只使用一个图像。

Answer 1

由于带有对角线的背景图像，我怀疑只能通过设计一个标签来完成所需的操作。

解决方案可以是对LI和内部A标签进行样式设置（请参阅与您的图像非常接近的示例：http://www.litecommerce.com/services.html）或将锚文本包装到SPAN中并对A和内部样式进行样式化SPAN标签。

Answer 2

这是我在Firebug中调整页面时获得的HTML和CSS，它可以获得所需的效果：

<li class="nav-one" style="display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px;">
  <a href="#one" class="current" style="background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px;">Featured</a>
</li>

您可以将内联样式转换为适当的CSS样式。上面的标记仅适用于选定的LI元素和内部的锚元素。

希望这会对你有所帮助。

好的，这里有适合您的更新版本（请注意，上面的CSS只应用于选定的LI和A元素）：

您的HTML标记

<ul class="nav">
  <li class="nav-one current"><a href="#one">Services</a></li>
  <li class="nav-two"><a href="#two">Clients</a></li>
</ul>

注：class ='nav-one 当前'在选定的LI元素上而不是A元素

您的新CSS

ul.nav li.current { display:block; height:35px; background: url('http://thegoodgirlsnyc.com/holly/images/tabarrow.png') no-repeat 50% 24px; }
ul.nav li.current a { background:#993; display:block; width:85px; height:20px; line-height:20px;padding:2px; }

CSS选择器中存在错误。它应该是：

#example-one ul.nav ul.one li.nav-one.current { ... }
#example-one ul.nav ul.one li.nav-one.current a { ... }

以下是我在Chrome中所做的一些示例以及结果：

注意：此外，您的图像路径看起来没有正确解析服务器上的图像，在我的情况下，这是因为我放入了图像的完整路径。

注意：您没有更改标记，以便在LI元素上使用“当前”类而不是A元素。