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

Question

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

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

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

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

我该如何解决？

代码：

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

Answer 1

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

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

现场演示

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

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