使用CSS來對背景圖像的LI元素進行樣式設置

我試圖使用CSS生成的選項卡來顯示選項卡下箭頭的活動狀態。我試圖使用背景位置屬性來定位懸停事件的圖像，但它會使圖像超出給定比例的選項卡。
這是該頁面：http://thegoodgirlsnyc.com/holly/about。有源標籤應該是這樣的：使用CSS來對背景圖像的LI元素進行樣式設置

screenshot

的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

我怎樣才能得到這個圖像在預定義的背景的底部顯示？這些標籤將包含在多個位置，文字長度不同，因此它們只能使用一個圖像。

來源

2011-09-19 MLS1984

這裏的是HTML和CSS我從調整在Firebug您的頁面得到預期的效果了：

<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應該只適用於選定的李和中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>

注：類= 'NAV-一個當前' 選擇LI元素而不是一個元素

新的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 { ... }

下面是我在瀏覽器做了樣品和結果： Example Style

注：此外，它看起來像你的圖像路徑是不解析對圖像的服務器正確，在我的情況下，這是因爲我把圖像的完整路徑。

注意：你沒有改變的標記有「當前」 Li元素，而不是一個元素類。

來源

2011-09-19 16:45:14

謝謝德米特里，但這不起作用。如果我應用了您顯示的樣式，則活動標籤和非活動標籤都會顯示箭頭。我嘗試將樣式從當前切換到李的調用，但高度減速取消了顯示的圖像。 – MLS1984

我已經應用了樣式，但它們仍然無法正常工作。這是代碼應該適用的標籤：＃example-one ul.nav ul.one li.nav-one .current {display：block;高度：35px;背景：url（'/ images/tabarrow.png'）no-repeat 50％24px; } ＃example-one ul.nav ul.one li.nav-one .current a {background：＃993;顯示：塊;寬度：85px;高度：20像素;行高：20像素;填充：2px的; } – MLS1984

謝謝你的支持德米特里。最後，我能夠正確定位CSS，但是當我將「當前」類移動到li時，鏈接功能會丟失。 – MLS1984

由於具有對角線的背景圖像，我懷疑只能通過設計一個標籤來完成您所需要的操作。

該解決方案既可以對LI和內部A標籤（請參閱與您的圖像非常接近的示例：http://www.litecommerce.com/services.html）進行樣式設計，也可以將定位文本包裝到SPAN中，並對A和內部SPAN標籤進行樣式設計。

來源

2011-09-19 18:02:26

使用CSS來對背景圖像的LI元素進行樣式設置

回答

相關問題