Заполните div цветом, когда текст превышает определенную высоту, не повторяйте CSS sprite bg image - PullRequest
0 голосов
/ 21 марта 2011

Длинный заголовок, но его трудно сжать без потери объяснения.

Объяснение изображения: 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;
}

1 Ответ

1 голос
/ 21 марта 2011

Помимо создания нового имиджа, это, вероятно, самое простое исправление:

Внутри вашего спрайта переместите изображение «фоновое изображение с эффектом затухания» в нижнюю часть изображения.

Live Demo

Вот тестовое изображение, которое я сделал для демонстрации:

Вы видите, что все «другие изображения спрайтов» находятся вверху файла.

...