背景图像

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/

希望这台你在正确的方向...