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

【问题标题】：How to create an image sprite that stretches both horizontal and vertically as a single image?如何创建一个水平和垂直拉伸为单个图像的图像精灵？
【发布时间】：2013-03-14 00:14:25
【问题描述】：

我正在尝试为一个可以垂直和水平拉伸同时还具有悬停状态的框制作图像精灵。我通常创建一个仅垂直或水平拉伸的精灵。在这种情况下，我会让必须无限拉伸的盒子部分接触图像的顶部和底部以垂直循环或接触左侧和右侧以水平拉伸，但我坚持为两者制作一个精灵。

这是我正在使用的内容，它将包含一个链接列表 (

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

我不知道我是否可以将 CSS 与我现在拥有的东西一起使用来完成我想要完成的事情，或者我是否必须将图像分解成单个文件的小部分。以下是我对一侧的想象。

这是我在两个不同文件中的最终结果。仍然不完全高兴，因为我希望这个精灵是独立的，但也许我太挑剔了？

问题：

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

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

【问题讨论】：

CSS3 或 CSS4 可以将不同的图像添加到背景的不同部分，因此您只能使用一个。在这一点上，我不确定是否有任何浏览器支持它。也许是 Chrome 或 Safari。
+1 和最喜欢的。您已在问题中提供了所有内容，现在我们只需要演示。
Well, words, you betray me. 如果你需要多个背景（所以你不需要将两个背景分成四个角），除了 IE8<.>
这是一个非常接近的解决方案。这个想法是让一个图像精灵拥有构建精灵所需的一切。虽然这非常接近我的需要。
请看赏金要求

标签： css sprite css-sprites

【解决方案1】：

这是对您的问题 #1 的回答：

不完全是，但在 CSS 中可以非常接近地实现。看看这个fiddle

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

总的来说，适用于大多数浏览器，除了：

在 IE8 及以下版本中，缺少阴影和圆角边框
在 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;
}

【讨论】：

【解决方案2】：

经过更多研究，我找到了答案。不幸的是，我的问题没有真正的答案，我也不打算让这个问题成为一个棘手的问题。尽管如此，我们开始吧。

答案：

1) 不。这是不可能的。

2) 注释框应该从宽度和高度无限延伸，这使得使用 1 个精灵是不可能的。如果这确实是需要，那么我必须按照 Jared Farrish 所说的链接来处理 2 个背景图像。

相反，我发现的最佳解决方案是将第一张图片和带有角的精灵组合在一起。想象一个精灵如下：

从左到右，但侧边栏按右栏、左栏、右悬停栏、左悬停栏的顺序，触动图形顶部到底部。

然后抓住两个指针并将它们放在将放置 cmets 框顶部的栏的右侧。这只是让以后用 CSS 编写它们变得更容易。

最后，抓住我第一个图形中的两个评论框，并将悬停状态置于正常状态下方。我开始意识到，即使我说我希望盒子无限期地伸展，但这并不完全正确。永远不会出现盒子是 300,000 像素宽的情况，所以我只是将它们拉伸到 900 像素，因为这是我的内容的宽度，并且这些盒子的最大宽度为 900 像素，高度不受限制。

整个图像大约有 4kb，我能够实现让 1 个图像包含精灵。我不需要将角分别放在精灵的另一部分，因为我只是参考它们在评论气泡中的位置。 :)

【讨论】：