CSS翻轉導航

我還沒有真的做過背景導航翻轉，我通常只是在文本翻過來後改變它的顏色。不過，我現在試圖做到這一點，但似乎無法做到。CSS翻轉導航

我想用CSS做所有事情，因爲我相信有一種方法，但是我確實看到很多使用精靈和圖像翻轉的其他人。哪種方式最好？我可能最終在我的網站上有很多圖片，所以我試圖遠離他們，所以我自己，嚴格思考CSS。有一種方法正確嗎？

CSS

#main-navigation { width: 100%; height: 100px; background: url(../img/NAV-BG.jpg) top center no-repeat; text-transform: uppercase; font-size: 1em; letter-spacing: 1px; line-height: 90px; /*border: 1px solid #000;*/ } 
#main-navigation ul { width: 860px; list-style: none; margin: 0 auto; text-align: center;} 
#main-navigation li { float: left ;margin-left: 30px; } 
#main-navigation li a { display: block; text-decoration: none; color: #000; } 
#main-navigation li a:hover { color: #c7bd89; background-color: #900; width: 120%; height: 30px; -moz-border-radius: 5px; border-radius: 5px; margin: 0 auto; margin-top: 20px;}

HTML

<nav id="main-navigation"> 
      <ul id="main-nav-left"> 
       <li class="current"><a href="#">Home</a></li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Current Season</a></li> 
       <li><a href="#">Past Seasons</a></li> 
       <li><a href="#">Contact</a></li> 
       <li><a href="#">Partners/Sponsors</a></li> 
      </ul> 
    </nav>

但我希望它看起來像這樣 enter image description here

我缺少什麼？

來源

2012-03-27 kia4567

你可以看到演示小提琴與精確的輸出解決了問題... – w3uiguru 2012-03-27 19:24:16

使用此

#main-navigation li a:hover { 
    color: #c7bd89; 
    background-color: #900; 
    width: 120%; 
    line-height: 30px; 
    -moz-border-radius: 5px; 
    border-radius: 5px; 
    margin-top: 30px; 
}

所有的問題是，你定義的高度......你應該定義一個行高，而不是和它完美的工作......但我仍然可以找到一個空間用於改進填充和邊距。

來源

2012-03-27 18:51:42

感謝您的迅速回復。我將使用這種方法。 – kia4567 2012-03-27 19:22:03

試着改變你的#main-navigation li a此：

#main-navigation li a { 
    /*display: block;*/ 
    text-decoration: none; 
    color: black; 
    padding: 5px; 
}

使用顯示塊推箱外的文本。添加填充將爲您提供文本週圍的空間。

精靈絕對比使用多個圖像更好，但最終他們基本上會變成同樣的東西。如果您可以創建足夠小的圖像（用於帶寬性能），它不會對您的網站造成太大影響。精靈很好地分組圖片。在文本週圍使用背景顏色和邊框也是一種非常有效的方法。

來源

2012-03-27 18:56:39 Robert

我看着它。謝謝！ – kia4567 2012-03-27 19:22:21

看一看我在這裏所做的：http://torontobanfffilmfest.com/splash

每八塊的有兩個版本，一盞燈和一個漆黑的，貼邊對邊單個圖像。例如，左上角是一個圖像，splash_buy_tickets_m.png，寬度爲582像素。但它顯示的空間是291像素寬。我們只看到完整圖像的一半，其中一半取決於：懸停。

，使得上翻轉圖像更改CSS很簡單：

#b1:hover, #b2:hover, #b3:hover, #b4:hover, #b5:hover, etc. { 
background-position: -291px 0; 
}

如果每個在您的按鈕欄中的按鈕組成的「活動」和「無效」的版本，那麼你可以只改變顯示的DIV內的圖像位置，水平或垂直移動。

來源

2012-03-27 19:03:01 ghoti

看到搗鼓代碼和演示

小提琴：http://jsfiddle.net/quR4E/3/

演示：http://jsfiddle.net/quR4E/3/embedded/result/

屏幕截圖：

enter image description here

來源

2012-03-27 19:14:45 w3uiguru

回答

相關問題