如何创建随菜单中文本长度扩展的悬停图像？
我有一个菜单，其中包含 5 个不同文本长度的项目 - 主页、关于我们、联系我们等 在 Photoshop 的模型中，我为悬停状态创建了一个背景图像，但如果它比文本长，它就会被截断，并且在 IE 中不起作用。图像尺寸为 105 X 28。这是一个链接示例，当您将鼠标悬停时，您会看到背景图像被截断。我该如何解决这个问题？谢谢
I have a menu with 5 items of varying text length - home, about us, contact us, etc
In the mockup in photoshop, I created a background image for the hover state but if it's longer than the text it gets cut off and it doesn't work in IE. The image is 105 X 28. Here's a link to example You'll see when you hover the background image gets cutoff. How can I fix this? Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
添加 css 规则到
#main-nav li a{ min-width: 105px;}我建议使用固定大小，即 105px.. 然后为每个菜单设置 text-align:center物品，所以它们都排列得很好..但这取决于你
add a css rule to
#main-nav li a{ min-width: 105px;}I would recommend having a fixed size though ie 105px.. and then text-align:center for each of the menu items so they all line up nicely .. but that is up to you
对于背景图像来说，按钮的宽度不够。
为每个 li 标签指定样式
width: 105px; height: 28px;或者创建一个具有该样式的 CSS 类，并将该类应用于每个类。The buttons aren't wide enough for the background image.
Give each li tag either the style
width: 105px; height: 28px;or make a CSS class with that styling and apply the class to each one.您可以尝试使用矩形背景图像并使用 CSS
border-radius属性来圆角。如果这不能让您获得您想要的外观或不够兼容，通常的方法是将图像分成三部分。两端加上一个可以拉伸或平铺的中间部分。
第三种方法是再次使用矩形背景图像，然后创建“蒙版”，这些“蒙版”是角切口的图像（与背景颜色相同），覆盖在主背景图像上以使角显得圆润。自从 border-radius 属性得到广泛支持以来，我还没有见过这种方法。
You can try using a rectangular background image and using the CSS
border-radiusattribute to round the corners.If that doesn't get you the look you want or isn't compatible enough, the usual way is to make the image in three parts. The two ends plus a middle section that can be stretched or tiled.
A third approach is to use a rectangular background image again, and then creates "masks" which are images of the corner cutouts (which are same color as background) that are overlayed on the main background image to make the corners appear rounded. I haven't seen this approach as much since the
border-radiusattributes became widely supported.这是一个纯CSS解决方案...
http://jsfiddle.net/wdm954/tAaCF/1/< /a>
基本上使用 CSS3
border-radius和box-shadow来代替对图像的需求。这在旧浏览器中会有点不那么时尚。对于像这样的简单样式，如果那些已经因 Web 上缺乏 CSS3 而苦恼的人看不到一些漂亮的圆角，那么这应该不会是一个大问题。旧版浏览器在悬停时仍会显示蓝色背景。Here is a pure CSS solution...
http://jsfiddle.net/wdm954/tAaCF/1/
Basically using CSS3
border-radiusandbox-shadowto replace the need for an image. This is going to be a bit less stylish in older browsers. For simple styling like this it shouldn't be a deal breaker if those who are already suffering through a lack of CSS3 across the Web don't get to see some pretty rounded corners. The older browsers will still show a blue background on hover.