4

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

这是我正在使用的内容，它将包含链接链接列表 (<ul>)，这些链接链接将使用悬停状态的背景颜色。

雪碧

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

我不知道我是否可以只使用我现在拥有的 CSS 来完成我想要完成的事情，或者我是否必须将图像分解成单个文件的小部分。这是我为一侧进行成像的方式。

切片示例

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

在此处输入图像描述 在此处输入图像描述

问题：

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

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

4

2 回答 2

1

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

不完全是，但非常接近它在 CSS 中是可以实现的。签出这个小提琴

有关兼容性，请参阅以下页面：

  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;
}
于 2013-03-15T10:04:48.193 回答
0

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

答案：

1）不。这是不可能的。

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

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

从左到右，但侧栏的顺序是右栏、左栏、右悬停栏、左悬停栏，即从顶部到底部。

其次抓住两个指针并将它们放在将放置评论框顶部的栏的右侧。这只是让以后用 CSS 对它们进行编程变得更容易。

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

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

于 2013-03-21T19:05:51.977 回答