CSS-спрайты и повторяющиеся фоны

Question

Я хотел бы сохранить все свои маленькие изображения в одном файле спрайта, например:

Теперь предположим, что я хочу добавить тонкое фоновое изображение, которое должно повторять x на 100% ширины элемента:

Должно ли это быть сохранено как отдельная сущность, или я могу как-то сохранить его в изображении спрайта? Я не могу понять, возможно ли сделать фоновый повтор над разделом спрайта, я думаю, что нет, но я уверен, что видел, как это где-то было сделано.

Answer 1

Я не уверен, что это уже в CSS3, но движок Gecko (Firefox 4…) добавляет image-rect как -moz-image-rect, что позволяет вам выбрать определенную часть изображения для использования.При этом вы можете выбрать часть вашего спрайта в качестве фонового изображения, а затем повторить его.

Это, безусловно, еще не широко распространено и не является стандартным.

Что мне нравится делать, так это делать3 вида спрайтов.Один с иконками, где вы вообще не используете повторы, один для изображений с горизонтальным повторением и один для изображений с вертикальным повторением.

Таким образом, вы можете добавить несколько повторяющихся фонов к одному спрайту, но неимейте много хлопот, используя это.

Answer 2

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

Помните, что повторение действительно небольших фоновых изображений (шириной 1-2 пикселя) может оказать ужасное влияние на производительность - для этого всегда лучше использовать немного большие изображения, поэтому, даже если они будут очень маленькими - это может быть лучше для рендеринга страниц мудрее, чем 1px в ширину.

РЕДАКТИРОВАТЬ: (относительно вашего редактирования)

Если ваш элемент имеет фиксированную высоту, вы можете поместить его на ширину спрайта 100% ширины спрайта с необходимой максимальной высотой элемента. Или, если вы знаете, что его максимальная ширина меньше ширины спрайта, сделайте его прямоугольником с максимальной шириной и высотой вашего элемента.

Если вы не знаете максимальную высоту и хотите поместить ее в самый верх, чтобы градиент стал сплошным, это можно сделать, если вы поместите повторное изображение в самый низ спрайта и поместите его с отрицательным top value background-position: 0px -300px где 300px - это расстояние от вершины вашего спрайта до верхней части фонового изображения на вашем спрайте.

Посмотрите, как Google позиционировал повторную BG на спрайте: