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

Question

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

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

所以我有一个显示文本的 div，文本的大小可能不同。附加到这个 div 我有一个带有淡出效果的背景图像。在顶部灰色然后淡出到白色。此图像效果是从 CSS Sprite 图像中获取的。

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

我该如何解决这个问题？

代码:

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

Answer 1

除了创建一个全新的图像，这可能是最简单的修复方法:

在您的 Sprite 中，将“具有淡出效果的背景图像”图像移动到图像底部。

Live Demo

这是我为演示而制作的测试图像:

您可以在文件顶部看到所有“其他 Sprite 图像”。