CSS - спрайты в качестве фоновых изображений

Question

У меня есть веб-приложение, производительность которого я работаю над улучшением. В попытке сделать это я решил использовать спрайты CSS. Я поместил все свои изображения в файл .png с именем images.png.

CSS-спрайты хорошо работают для всех классов CSS, которые просто отображают изображение один раз. Тем не менее, некоторые из моих изображений должны быть повторены. Например, у меня есть изображение banner.png, используемое для фона баннера. Всякий раз, когда я устанавливаю свойство background-repeat, создается впечатление, что изображение не повторяется. Чтобы показать мои определения CSS, вот они:

Before CSS Sprites
------------------
.ghwc {
  background-image: url(/images/layout/banner.png);
  background-repeat:repeat-x;
  color:White;
  width:300px;
}

After CSS Sprites
-----------------
.ghwc {
  background-image: url(/images/images.png);
  background-repeat:repeat-x;
  color:White; 
  background-position:60px 319px; 
  width:300px;
}

У меня вопрос: как использовать CSS-спрайты для повторяющихся изображений, таких как фоны?

Спасибо,

Answer 1

У меня вопрос: как использовать CSS-спрайты для повторяющихся изображений, таких как фоны?

Вы не делаете. Это просто невозможно при использовании CSS-спрайтов. Для этого вам нужно будет указать область изображения, которую нужно повторить, и, насколько мне известно, это невозможно в CSS 2 и 3.

Answer 2

Вы можете сделать это, если вы только background-repeat:repeat-x;, как в примере, вам просто нужно сделать все фоны, содержащиеся в контейнере спрайтового изображения, одинаковой ширины и выложить файл спрайтового изображения вертикально. Тогда ваше свойство положения фона всегда будет иметь первую позицию x равной 0, а спрайт расположен со второй позицией y (например, background-position:0 0; background-position:0 -100px; background-position:0 -200px; и т. Д.). Это может не работать во всех браузерах, если вы не можете указать точную высоту и установить overflow:hidden.

Answer 3

Если вы хотите использовать repeat-x, вы не должны помещать несколько изображений рядом друг с другом в вашем спрайте, поскольку весь спрайт дублируется в x-направлении (как вы уже заметили). Но вы можете поместить их в одну вертикальную линию. (И наоборот, если вы хотите использовать repeat-y. До сих пор нет ничего похожего на "background-crop" (может быть, в CSS4?))

Answer 4

Если ваше фоновое изображение (images.png) вообще отображается, ваш код должен работать. Если вы хотите, чтобы это правильно отображалось в Opera и Firefox, вам нужно добавить

фон привязанности: фиксированный;

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