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

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

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

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

Ответы

Ответ 1

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

Однако он определенно не является широко распространенным или стандартным.

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

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

Ответ 2

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

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

EDIT: (относительно вашего редактирования)

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

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

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