CSS 导航 Sprite - 奇怪的形状（非方形）
我通常在制作 CSS 精灵时没有任何问题，但是这个让我难住了......而且我不知道如何解决它。基本上我有一个如下所示的导航精灵：
我正在使用将它们放置在
<li class="welcome"><a href="#" title="welcome">welcome</a></li>
然后应用 CSS 来调整背景位置：
#navigation li.welcome a {
width:155px;
background-position:-0px -46.5px; }
当然我没有想到这一点，但问题发生在悬停时。由于您只能定义“方形”区域，因此当您将鼠标悬停在元素上时，“蓝色”悬停状态将转移到下一个导航项。
然后我想我必须为每个项目制作单独的图像......但是由于重叠的箭头部分，这也不会完全正常工作。
也许我必须分离出“中间”箭头分隔符？我真的不确定。
我被难住了。有什么想法吗？
I usually have no problems with making CSS sprites, but this one has got me stumped...and I'm not sure how to solve it. Basically I have a navigation sprite that looks like this:
I'm using the standard convention of laying them out in <li> tags such like:
<li class="welcome"><a href="#" title="welcome">welcome</a></li>
And then applying CSS to adjust the background position:
#navigation li.welcome a {
width:155px;
background-position:-0px -46.5px; }
Of course I didn't think of this, but the problem happens on hover. Since you can only define "square" areas, when you hover over an element, the "blue" hover state is being carried over to the next navigation item.
I then thought that I'd have to make individual images for each item... but that wouldn't work quite right either because of the overlapping arrow sections.
Maybe I have to seperate out the "in between" arrow seperators? I'm really not sure.
I'm stumped here. Any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我认为您必须制作一个能够满足您所有要求的“聪明”图像，这是正确的。
很难用语言解释，这里有一个示例链接： http://www .alistapart.com/d/sprites/ala-blobs2.html
这里是如何完成的链接（向下滚动到“不规则形状”）：http://www.alistapart.com/articles/sprites
I think you're right about having to cook up a 'clever' image which covers all your requirements.
It's difficult to explain in words, here's a link to an example: http://www.alistapart.com/d/sprites/ala-blobs2.html
Here's the link to how it's done (scroll down to 'Irregular shapes') : http://www.alistapart.com/articles/sprites
您能否重新创建精灵，以便导航按钮垂直堆叠？那么看来您可以使用负左边距将按钮安装在一起。这样，按钮左侧的负空间将是空的，而不是其中有箭头，因此悬停时，空腔将保持透明。
Could you recreate the sprite so that the navigation buttons are stacked vertically? Then it seems you could use negative left margins to fit the buttons together. This way, the negative space on the left side of the button would be empty, rather than have an arrow tip in it, so on hover, the cavity would remain transparent.
不要创建一排“活动”精灵，而是创建两排并交替激活它们，即：
这样，您始终可以剪切精灵；如果元素的索引为“奇数”（
index & 1 == 1），则只需添加 Y 值即可。Instead of one row of "active" sprites, create two and activate them alternatively, i.e.:
This way, you can always cut a sprite; you just have to add to the Y value if the index of your element is "odd" (
index & 1 == 1).您可以扩展精灵并用 5 行独立的悬停状态替换悬停状态，每行只有一个蓝色按钮，每个项目都有单独的悬停状态位置。文件大小不应太大。
You could extend your sprite and replace the hover state with 5 separate lines of hover state, each one having only a single blue button with a separate hover state position for each item. The files size shouldn't be too much greater.