2011-09-26 237 views
0

我试图建立一个固定的边界,与从这个精灵的浏览器窗口动态改变大小的网站(它不是完美的,我知道。):http://fc07.deviantart.net/fs70/f/2011/269/7/0/bordersprite_by_nakos-d4ayzne.pngCSS精灵位置问题

DEMO on jSFiddle

我您可以看到的问题是垂直墙壁部分。由于#falJ#falBheight:100%它们也包括底壁的末端以及两个壁画之间的空间。有没有办法强制backround-position只使用没有底壁的端部的垂直壁部分?

在此先感谢。

+2

*简短的回答:*不,这不是你想做的事情。您无法使用不符合潜在最大尺寸的精灵来提供流畅性。 *长答案:*如果没有人能够帮助你,我会在早上为你写一个解决方案。 – Ben

+0

@vonkly我很害怕这个。如果你向我展示一种方法来做到这一点,那将很酷。我可以等待你的解决方案然后:)谢谢:) –

+0

现在把它放在一起 - 我会编辑这个评论,当它完成。快速提问:元素的*宽度*是否固定,或者您是否也需要流体? – Ben

回答

0

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

这不是世界上最漂亮的事情,但它达到你想要什么。查看源代码&直接链接的背景图片,看看你需要做什么。它目前设置在299px宽;我想你会使用更广泛的东西。

我还建议在你的内容中添加一些填充(或者用p标记,span,另一个div等) - 它目前的设置方式不是我推荐的可读性。

编辑

我可以想像实现流体宽+高盒子,你在你所希望的方式有边界的唯一方法是使用第二图像的西部和含东的div 。这应该适用于你目前的方法。

+0

对不起,但这不是我想要实现的。我们误解了对方。 :)关键是我希望它适合任何屏幕尺寸,即使我在飞行中重新调整窗口大小。在这个顶部和底部将总是固定的大小。 –

+0

你告诉我*“只有高度随窗户高度变化而变化”; *这不正确地描述你的目标。为了达到你想要的效果,使用你以前的方法,并简单地使用西墙和东墙的不同图像。 *无法以您想要的方式*重复图片的特定部分(精灵)。 – Ben

+0

是的,我看到我的英语在哪里引导你错误的方式。我没有在其他地方找到其他解决方案,所以我按照你刚才所说的去做。 :) 感谢您的时间。如果你在回答中写下这个评论,我会接受它:) –