CSS精灵位置问题

时间:2011-09-26 09:09:38

标签: css-sprites background-position css

我尝试使用此精灵的浏览器窗口创建一个动态更改大小的站点的固定边框(我知道这不完美。):http://fc07.deviantart.net/fs70/f/2011/269/7/0/bordersprite_by_nakos-d4ayzne.png

DEMO on jSFiddle

我可以看到的问题是垂直墙部分。由于#falJ#falBheight:100%,它们也包括底壁的末端,两个墙壁精灵之间的空间。有没有办法迫使backround-position仅使用没有底壁末端的垂直墙部件?

提前致谢。

1 个答案:

答案 0 :(得分:0)

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

这不是世界上最漂亮的东西,但它实现了你想要的东西。查看源代码&直接链接背景图片,看看你需要做什么。它目前设定为299像素宽;我想你会用更广泛的东西。

我还建议在你的内容周围添加一些填充(使用ap标签,span,另一个div等) - 它当前设置的方式不是我想要的建议可读性。

修改

我可以想象用你想要的方式实现一个流畅的宽度+高度框的唯一方法是使用包含div的西和东的第二个图像。这应该适用于您当前的方法。