如何创建一个水平和垂直拉伸为单个图像的图像精灵？

Question

我正在尝试为一个可以垂直和水平伸展的盒子制作一个图像精灵，同时还可以将鼠标悬停在状态上。我通常会创建一个只能垂直或水平拉伸的精灵。在这种情况下，我会使盒子的部分必须伸展无限地触摸图像的顶部和底部以垂直循环或触摸左侧和右侧以水平拉伸但我仍然坚持为两者制作一个精灵。 / p>

以下是我正在使用的内容，其中包含将使用悬停状态背景颜色的链接链接列表（＆lt; ul＆gt;）。

左侧：常规状态。 右侧：悬停状态

我不知道我是否可以只使用CSS来完成我正在尝试完成的工作，或者我是否必须将图像拆分为单个文件的小部分。以下是我为一方做影像的方法。

以下是我在两个不同文件中的结果。仍然不是很开心，因为我希望这个精灵能够自我控制，但也许我只是太挑剔了？

问题：

1. 我是否可以通过使用大多数标准浏览器支持的CSS代码来实现第一个图像的目标，这意味着不需要绝对最新版本的Firefox，Chrome，Safari？我希望这是高度兼容的。
2. 如果问题1为否，那么如何为此示例创建精灵布局？
3. 如果圆角的实现不明显，你能提供示例CSS（伪代码也可以）吗？

注意：我知道现在框中有列表项目，但想象一个菜单，当你将鼠标悬停在第一个或最后一个项目上时，角落以及页眉/页脚应该变为白色以悬停在状态上。我可以自己想出这部分，但我只是想提一下，以便精灵设计不缺少这个功能。

Answer 1

这是你的问题＃1的答案：

不完全，但非常接近它可以在CSS中实现。结帐fiddle

请参阅这些页面以了解兼容性：

1. http://caniuse.com/border-radius
2. http://caniuse.com/css-boxshadow
3. http://caniuse.com/css-gencontent

总之，适用于大多数浏览器，但不包括：

1. 在IE8及以下版本中，缺少阴影和圆角边框
2. 在IE7及以下版本中，箭头和悬停状态也会丢失，所以只有一个框。 ：（

如果您不必支持IE7，我认为这是可用的。

CSS代码：

.box {
    background-color: #ccc;
    display: inline-block;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    position: relative;
}
.box:hover {
    background: white;
}
.box:hover:after {    
    border-bottom: 20px solid white;
}
.box:before {
    content: ' ';
    display: block;
    position: absolute;
    top: -6px;
    right: 26px;
    width: 8px;
    height: 6px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
}
.box:after {
    content: ' ';
    display: block;
    position: absolute;
    top: -10px;
    right: 10px;
    border-bottom: 20px solid #ccc;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
}

Answer 2

经过更多的研究，我找到了答案。不幸的是，我的问题没有真正的答案，我不打算将此作为一个技巧问题。尽管如此，我们走了。

数目：

1）不，这是不可能的。

2）注释框应该从宽度和高度无限延伸，这使得无法使用1个精灵。如果这确实是需要，那么我必须做Jared Farrish所说的与2张背景图片有关的链接。

相反，我找到的最佳解决方案是第一个图像和精灵的组合，其中有角。想象一下精灵如下：

从左到右，但是右侧栏，左侧栏，右侧悬停栏，左侧悬停栏中的侧栏，触及格栅顶部到底部。

然后抓住两个指针并将它们放在将放置注释框顶部的条形图的右侧。这使得以后使用CSS更容易对它们进行编程。

最后，抓住我的第一个图形中的两个注释框，并将悬停状态置于正常状态之下。我开始意识到即使我说我希望盒子能无限延伸，但这并不完全正确。永远不会出现300,000px宽的盒子，所以我只是将它们拉伸到900px，因为这是我内容的宽度，这些盒子的最大宽度为900px，高度不限。

整个图像大约4kb，我能够实现1个图像包含精灵。我不需要将角分别放在sprite的另一部分上，因为我只是引用它们在注释气泡中的位置。 :)