如何在菜单中创建随文本长度扩展的悬停图像？

问题描述

| 我有一个菜单，其中包含5种不同文本长度的项目-主页，关于我们，与我们联系等 在Photoshop的模型中，我为悬停状态创建了背景图像，但是如果它长于文本，则会被截断，并且在IE中不起作用。图片为105 X28。这是示例的链接，当您将鼠标悬停在背景图片上时，就会看到该图片。我怎样才能解决这个问题？谢谢     

解决方法

        将CSS规则添加到

#main-nav li a{ min-width: 105px;}

我建议尽管有一个固定的大小，即105px ..然后为每个菜单项设置text-align：center，以便它们都很好地对齐..但这取决于您     ,        按钮的宽度不足以容纳背景图像。 给每个li标签指定样式

width: 105px; height: 28px;

，或使用该样式制作一个CSS类，然后将该类应用于每个样式。     ,        您可以尝试使用矩形背景图像，并使用CSS

border-radius

属性将角变圆。 如果这样不能使您获得所需的外观或兼容性不够，通常的方法是将图像分为三个部分。两端加上可拉伸或平铺的中间部分。 第三种方法是再次使用矩形背景图像，然后创建\“ masks \”，这些图像是覆盖在主背景图像上以使拐角显得圆化的拐角切口（与背景颜色相同）的图像。自从广泛支持

border-radius

属性以来，我还没有看到这种方法。     ,        这是一个纯CSS解决方案... http://jsfiddle.net/wdm954/tAaCF/1/ 基本上使用CSS3

border-radius

和

box-shadow

来代替图像。在较旧的浏览器中，这将变得不那么时尚。对于像这样的简单样式，如果那些已经因缺乏CSS3而在网络上遭受苦难的人看不到一些圆滑的角落，那不应该成为一笔麻烦事。较旧的浏览器在悬停时仍会显示蓝色背景。