背景圖像

Question

我在這個過程中編碼的網頁設計，我已經花了我的時間宏偉想我將如何編寫此導航欄，其中<li>有背景圖像調整到元素寬度的動態寬度。

我的想法是使用<span>並將背景圖片分成三部分。

<li> 
<span class="libefore"></span> 
<a href="#">MOVIES</a> 
<span class="liafter"></span> 
</li> 

這是什麼編碼的最佳方式？

Answer 1

通常這是一個被稱爲「滑動門」技術實現有過這樣讀：

http://www.alistapart.com/articles/slidingdoors/

Answer 2

如果你願意去與CSS 2.1：前：選擇後（見這裏支持的瀏覽器：http://www.quirksmode.org/css/contents.html），你可以嘗試這樣的事：

HTML：

<li> 
    <a href="#">Movies</a> 
</li> 

CSS：

li:before { 
    background-color: #F00; 
    content: '\00A0\00A0'; 
} 

li a { 
    background-color: #0F0; 
    text-transform: uppercase; 
} 

li:after { 
    background-color: #00F; 
    content: '\00A0\00A0'; 
} 

這會保持您的HTML清潔而不會引入任何表示元素。 （即沒有沒有內容或分層目的的跨度元素）另外，使用文本轉換來處理任何大寫轉換並不是一個錯誤的做法，以防萬一您希望有一天更改樣式而無需修改內容。

這是應該給一點出發點來調整從小提琴：http://jsfiddle.net/6Keaa/

希望這臺你在正確的方向...