当文本超过一定高度时用颜色填充 div，不要重复 CSS sprite bg 图像

Question

标题很长，但很难在不丢失解释的情况下压缩它。

图片说明：http://img560.imageshack.us/f/skrmavbild20110321kl135.png/

所以我有一个 div 来显示文本，文本的数量可能会有所不同。附加到这个 div 我有一个带有淡出效果的背景图像。顶部为灰色，然后淡出为白色。该图像效果是从 CSS 精灵图像中获取的。

我的问题是，当文本超过一定高度时，它会使 CSS 精灵背景图像拉伸，以便显示其他不应该显示的图像元素。这不是显示设置的背景颜色。

我该如何解决这个问题？

代码：

.post-bg {
width: 572px;
margin: 0;
padding: 0;
background: #fff url('images/sprite.png') no-repeat;
background-position: 0px -198px;
}

Answer 1

除了制作全新的图像之外，这可能是最简单的修复方法：

在精灵内部，将“具有淡出效果的背景图像”图像移动到图像的底部。

现场演示

这是我制作的测试图像证明：

您可以看到所有“其他精灵图像”都位于文件顶部。