CSS精灵位置问题答案

【问题标题】：CSS sprite position problemCSS精灵位置问题
【发布时间】：2011-09-26 09:09:38
【问题描述】：

我试图为站点创建一个固定边框，该边框可通过此 sprite 随浏览器窗口动态更改大小（我知道这并不完美。）：http://fc07.deviantart.net/fs70/f/2011/269/7/0/bordersprite_by_nakos-d4ayzne.png

如您所见，我的问题是垂直墙部分。由于#falJ 和#falB 是height:100%，它们也包括底墙的末端以及两个墙精灵之间的空间。有没有办法强制backround-position 只使用垂直墙部分而不使用底墙末端？

提前致谢。

【问题讨论】：

【解决方案1】：

解决方案：http://jsfiddle.net/vonkly/Ld43B/

它不是世界上最漂亮的东西，但它实现了你想要的。查看背景图像的源代码和直接链接，了解您需要做什么。目前设置为 299px 宽；我想你会使用更广泛的东西。

我还建议在您的内容周围添加一些填充（使用 ap 标记、跨度、另一个 div 等） - 目前的设置方式不是我推荐的可读性。

编辑

我能想象的唯一方法是使用您想要的方式实现具有边界的流体宽度 + 高度框，即为包含 div 的西方和东方使用第二个图像。这应该适用于您当前的方法。

【讨论】：

对不起，但这不是我想要实现的。我们互相误解。 :) 关键是我希望它适合任何屏幕尺寸，即使我动态调整窗口大小也是如此。在此顶部和底部将始终固定大小。
您告诉我“只有高度会随着窗口高度的变化而变化”；这并没有正确描述您的目标。要达到您想要的效果，请使用您以前的方法，并简单地为西墙和东墙使用不同的图像。 无法以您想要的方式重复图像（精灵）的特定部分。
是的，我知道我的英语把你带错了方向。我没有在其他任何地方找到其他解决方案，所以我按照你刚才说的做。：）感谢您的时间。如果您在回答中写此评论，我会接受它:)
答案已修改。谢谢！我会牢记这一点，如果我想到了什么，请告诉你。