使用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>

注意：在選定的LI元素而不是A元素上，class ='nav-one current '

您的新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元素上具有“ current ”類。