Css sprite: создание, применение — учебник CSS

Понятия, связанные с CSS Sprite

оригинал

Оригинальная короткая книга: https://www.jianshu.com/p/8ae3be23a642

Контур

1. Что такое CSS Sprite
2, преимущества CSS Sprite
3, недостатки CSS Sprite
4. Использование CSS Sprite

1. Что такое CSS Sprite

1.1 CSS-спрайты многие люди в Китае называют CSS-спрайтами, что является способом обработки изображений веб-страниц. Это позволяет вам объединить все разбросанные изображения на странице в одно большое изображение, так что при посещении страницы загруженные изображения не будут отображаться медленно одно за другим, как раньше. Что касается текущей скорости Интернета, время загрузки одного изображения размером не более 200 КБ в основном такое же, поэтому нет необходимости беспокоиться об этой проблеме.

1.2 Ключ к ускорению — не снижение качества, а уменьшение числа. Традиционная резка изображений уделяет внимание мелким деталям. Чем меньше размер изображения, тем лучше, а чем меньше вес, тем лучше.

На самом деле размер изображения не имеет значения. Каждый раз, когда клиент отображает изображение, он отправляет запрос на сервер. Следовательно, чем больше снимков, чем больше запросов, тем больше вероятность задержки.

1.3. CSS Sprites фактически объединяет некоторые фоновые изображения на веб-странице в файл изображения, а затем использует комбинацию CSS «background-image», «background-repeat» и «background-position» для позиционирования фона, background-position Положение фонового изображения можно точно определить по числам.

2. Преимущества CSS Sprite

2.1 Использование CSS-спрайтов может значительно уменьшить количество HTTP-запросов веб-страниц, тем самым значительно улучшив производительность страниц.Это также самое большое преимущество CSS-спрайтов и основная причина их широкого распространения и применения;

2.2 CSS-спрайты могут уменьшать байты изображений.Много раз сравнивалось, что байты трех изображений, объединенных в одно изображение, всегда меньше суммы байтов этих трех изображений.

2.3. Он решает проблему веб-дизайнеров с присвоением имен изображениям. Вам нужно только назвать коллекцию изображений, не называя каждый маленький элемент, что повышает эффективность создания веб-страниц.

2.4. Изменить стиль удобно: вам нужно только изменить цвет или стиль изображения на одном или нескольких изображениях, и можно изменить стиль всей веб-страницы. Удобнее в обслуживании.

3. Недостатки CSS Sprite

3.1. При объединении изображений вы должны объединить несколько изображений в одно изображение упорядоченным и разумным образом и оставить достаточно места, чтобы на пластинах не появлялся ненужный фон; это нормально, наиболее болезненно на адаптивной странице под широкоформатным экраном, экран высокого разрешения, если ваше изображение недостаточно широкое, на нем легко может появиться обрыв фона;

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

Это рукоделие, не сложное, но очень громоздкое; к счастью, брат-призрак Tencent разработал его с помощью Adobe AIR Инструмент создания стилей CSS-спрайтов, хотя и имеет негибкое использование, он намного удобнее, чем измерение в фотошопе, и стиль создается, копируется и копируется напрямую.

3.3. Сопровождение CSS-спрайтов более проблематично. Если фон страницы немного изменен, обычно необходимо изменить объединенное изображение. Лучше не перемещать то место, где его не нужно менять, чтобы избежать дополнительных изменений. css Если он находится на исходном месте Если вы не можете отложить его, вы можете (желательно) только добавить картинку вниз, чтобы байты изображения увеличились, а css нужно было изменить.

3.4, CSS-спрайты очень достойны изучения и применения, особенно на странице есть множество значков (значков). Короче говоря, во многих случаях каждый должен взвесить все за и против, прежде чем решить, применять ли CSS-спрайты.

4. Использование CSS Sprite

4. 1. Не ждите, пока вы закончите нарезку, прежде чем запускать спрайт. Если вы вырезаете изображение во время написания CSS, а затем ждете завершения всего веб-сайта, прежде чем объединить эти изображения в спрайт, вам придется полностью переписать ваш CSS, вы также занимает много времени, чтобы сшить много картинок с помощью PS.

4.2 Интегрируйте маленькое изображение в большое изображение, а затем установите положение фона в соответствии с положением конкретного значка на большом изображении.

 

Перепечатано по адресу: https://www.cnblogs.com/shcrk/p/9279704.html

javascript — Изменение класса изображения CSS Sprite

Я использую CSS-спрайты для ряда изображений на моем сайте. Я хочу реализовать свои стрелки вверх и вниз в виде спрайтов.

Стрелки используют один тег img на веб-сайте, и я использую javascript для замены нужного изображения.

Скажем, я меняю стрелку вниз на изображении на стрелку вверх. В CSS стрелка вниз — это cssDownArrow, а стрелка вверх — cssUpArrow.

Стратегия, которую я выбрал, заключалась в том, чтобы пойти туда, где я

menuArrow.src = "/website/images/upArrow.gif";

И измените его на это (cssUpArrow — это класс CSS для спрайта, а clear.gif — изображение-заполнитель, которое я использую для тегов изображений, где спрайты будут заменяться местами):

menuArrow.src = "/website/images/clear.gif";
menuArrow.class = "cssUpArrow";

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

В какой-то степени я понимаю, почему это происходит, но не уверен в лучшем решении? Любая помощь? Спасибо!

2

Mark Nenadov 28 Июн 2011 в 18:31

2 ответа

Лучший ответ

Вам нужно использовать className.

menuArrow.className = "cssUpArrow";

0

ovi 28 Июн 2011 в 14:32

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

0

bdparrish 28 Июн 2011 в 14:34

SVG спрайты, 4 способа использования

Мы давно собирались делать видео про SVG спрайты, и вот наконец-то случилось. Существует четыре классических способа использования (с CSS и JavaScript), которые мы и рассмотрим, а еще поговорим о способах практического их применения: анимации и работа с кучей иконок.

#

SVG спрайт инлайново в HTML

Первый способ — положить SVG код прямо в HTML, спрятать его с помощью display: none и понаписать там несколько <g> элементов внутри блока <defs>. Это старый способ, который потом улучшили заменив <defs> и <g> на несколько элементов <symbol>.

Обращаться к «символам» можно через блок <use> и атрибут xlink:href по айдишнику.

Но в таком случае браузер ничего не может закешировать и на на помощь приходит способ #2.

#

SVG спрайт в отдельном файле

Отличается от первого только тем, что мы кладем спрайт в какую-нибудь директорию и к элементам обращаемся с помощью того же атрибута xlink:href, но вместо «голого» айдишника нужно сначала написать сам файл.

Так браузер будет кешировать файл на всех страницах вашего сайта и не придется его каждый раз загружать.

Инструменты для сборки: grunt и gulp.

#

SVG спрайт из CSS файла

Еще один способ — выкладывать SVG напрямую в CSS с помощью data:image или data:url. Нам тут в комментариях советовали, что не стоит копипастить чистый SVG, лучше эскейпить, а то вдруг чего.

Инструменты для сборки: grunt, gulp, онлайн.

#

SVG спрайт с общим viewbox

Классический спрайт с одним общим «полотном». Обращение к конкретным элементам происходит посредством сдвигания viewox. Используется в основном для различных анимаций. Напримет таких.

See the Pen SVG Sprite Animation #2 by Sarah Drasner (@sdras) on CodePen.

#

Заключение

Использование SVG спрайтов существенно облегчает работу с множеством иконок, к ним проще получать доступ и их проще стилизовать. Плюс к ним не применяется сглаживание (антиалиасинг) в отличие от иконочных шрифтов.

Fallback для старых и хромых веб-дизайнеров браузеров: svg4everybody.

Для пошаговых и не только анимаций, использование SVG спрайтов меняет ровно то, что они векторные и хорошо смотрятся везде. Ну и их можно скриптить по частям, что дает бесконечные возможности для творчества.

Если вы, конечно, будете этими возможностями пользоваться.

CSS-спрайтов | Как создать спрайты изображений

Использование CSS-спрайтов — это способ объединить несколько изображений в один файл изображения для использования на вашем веб-сайте с целью повышения производительности.

Учитывая, что вы создадите отличное изображение, спрайт может показаться немного неправильным, но спрайты должны помочь прояснить ситуацию. Термин «спрайты» происходит от техники компьютерной графики, часто используемой в видеоиграх. Компьютер может сохранять графику в памяти, а затем отображать только части изображения в определенный момент времени.

Спрайт — это, по сути, комбинированная графика. CSS-спрайты помогут вам получить изображение один раз, а затем переместить его и отобразить его части. Это значительно сокращает накладные расходы на получение большего количества изображений. Следовательно, спрайт — это набор изображений, собранных в одно изображение. Веб-страница с несколькими изображениями может дольше загружаться и генерировать больше запросов к серверу. Использование спрайтов изображений поможет уменьшить количество запросов к серверу и сэкономит трафик.

Итак, вместо трех отдельных изображений мы будем использовать одно изображение.С помощью CSS мы можем отображать только ту часть изображения, которую хотим использовать или отображать. Ниже приведены три изображения спрайтов, созданные с помощью CSS Sprites Generator . В этой статье мы будем использовать первый из них (sprites.gif), который имеет размеры 132x43px:

В строках ниже мы предоставим простой пример, в котором мы будем использовать наше изображение CSS sprites. gif:

 


<стиль>
#дом {
  ширина: 43 пикселя;
  высота: 43 пикселя;
  фон: url (sprites.gif) 0 0 без повтора;
}
#следующий {
  ширина: 43 пикселя;
  высота: 43 пикселя;
  фон: url (sprites.gif) -89px 0 без повтора;
}
#назад {
  ширина: 43 пикселя;
  высота: 43 пикселя;
  фон: url (sprites.gif) -43px 0 без повтора;
}



 
 

 
 

 
 

Отображаемое изображение будет фоновым изображением, которое мы укажем в CSS width: 43px, соответственно 43px height — определяет часть изображения, которую мы хотим использовать; фон: url (sprites.gif) 0 0 без повтора; — определяет фоновое изображение и его положение (слева 0 пикселей, сверху 0 пикселей) с помощью свойства no-repeat. Атрибут img определяет небольшой прозрачный gif, потому что свойство src нельзя оставлять пустым. Изображение показано выше, рядом с кодом.

Далее мы будем использовать изображение спрайта («sprites. gif») для создания списка навигации. В приведенном ниже примере мы будем использовать список HTML, потому что он может быть ссылкой и принимать фоновое изображение.

Пример:

 


<стиль>
#navlist {
  положение: относительное;
}
#navlist li {
  маржа: 0;
  отступ: 0;
  стиль списка: нет;
  позиция: абсолютная;
  верх: 0;
}
#navlist li, #navlist a {
  высота: 43 пикселя;
  дисплей: блок;
}
#дом {
  слева: 0px;
  ширина: 43 пикселя;
  фон: url ('sprites.gif ') 0 0;
}
#prev {
  слева: 63px;
  ширина: 43 пикселя;
  фон: url ('sprites.gif') -46px 0;
}
#следующий {
  слева: 129 пикселей;
  ширина: 43 пикселя;
  фон: url ('sprites.gif') -89px 0;
}



  

  
   
  
   
   
   

 

В строках ниже мы хотели бы добавить переходный эффект к нашему списку навигации, который был создан выше. Мы будем использовать эффект наведения на спрайты изображений. Для этого нам также понадобится спрайт наведенного изображения, в нашем случае sprites_hover.gif, который имеет точные размеры, как исходное изображение, sprites.gif. Вы можете создать любой эффект на изображении при наведении курсора. Следовательно, изображение, которое мы будем использовать, содержит три небольших навигационных изображения и три маленьких изображения, которые будут использоваться для эффекта, который мы хотим использовать, а именно для эффектов загрузки. Учитывая, что это одно изображение, а не отдельные файлы, в основном скорость загрузки изображения не будет задерживаться.Мы добавим несколько строк кода, чтобы добавить эффект наведения:

 #home a: hover {
  фон: url ('sprites_hover.gif') 0 -43px;
} 

Полный пример приведен ниже:

 


<стиль>

/ * позиция устанавливается относительно, чтобы разрешить абсолютное позиционирование внутри нее * /
#navlist {
  положение: относительное;
}
/ * маржа установлена ​​на 10 пикселей, стиль списка удален, все элементы списка позиционируются абсолютно, верхняя граница поля установлена ​​на 20 пикселей * /
#navlist li {
  маржа: 10 пикселей;
  стиль списка: нет;
  позиция: абсолютная;
  верх: 20 пикселей;
  отступ слева: 2 пикселя;
}

/ * высота всех изображений 43px * /
#navlist li, #navlist a {
  высота: 43 пикселя;
  дисплей: блок;
}

/ * Позиционируется до упора влево, ширина изображения составляет 43 пикселя, а фоновое изображение - спрайты. gif и его позиция слева 0 пикселей, сверху 0 пикселей и без повтора * /
#дом {
  слева: 0px;
  ширина: 43 пикселя;
  фон: url ('sprites.gif') 0 0 без повтора;
  
}
/ * Позиционируется на 63 пикселя слева, ширина изображения - 43 пикселя, а фоновое изображение - sprites.gif, и его положение - на 44 пикселя справа от исходного изображения * /
#следующий {
  слева: 63px;
  ширина: 43 пикселя;
  фон: url ('sprites.gif') -44px 0 без повтора;
}
/ * Расположен на 129 пикселей слева, ширина изображения - 43 пикселей, а фоновое изображение - спрайты.gif и его положение находится на 89 пикселей справа от исходного изображения * /
#назад {
  слева: 129 пикселей;
  ширина: 43 пикселя;
  фон: url ('sprites.gif') -89px 0 без повтора;
}
/ * Позиционируется в 0, ширина изображения - 43 пикселя, а фоновое изображение - sprites_hover.gif * /
#home a: hover {
  фон: url ('sprites_hover.gif') 0 -43px;
  маржа слева: 1px;
}
/ * Позиционируется на 44 пикселя справа от исходного изображения при наведении курсора, ширина изображения - 43 пикселя, а фоновое изображение - sprites_hover. gif * /

#next a: hover {
  фон: url ('sprites_hover.gif ') -44px -43px;
  маржа справа: 5 пикселей;
  отступ: 1 пиксель;
}
/ * Расположен на расстоянии 89 пикселей справа от исходного изображения при наведении курсора, при этом ширина изображения составляет 43 пикселей, а фоновое изображение - sprites_hover.gif * /
#back a: hover {
  фон: url ('sprites_hover.gif') -89px -43px;
  маржа справа: 5 пикселей;
}





  
   
  
   
  
   



 

Заключение

Веб-страница с большим количеством изображений, особенно небольших изображений (например, кнопок, значков и т. Д.), Может загружаться дольше. Использование спрайтов изображений вместо отдельных изображений значительно сократит количество HTTP-запросов, которые вы делаете от браузера к серверу, что может быть чрезвычайно эффективным для улучшения времени загрузки и общей производительности вашего веб-сайта.

Вредны ли CSS-спрайты для SEO?

Вредны ли спрайты CSS для SEO? — Обмен стеками веб-мастеров

Сеть обмена стеками

Сеть Stack Exchange состоит из 177 сообществ вопросов и ответов, включая Stack Overflow, крупнейшее и пользующееся наибольшим доверием онлайн-сообщество, где разработчики могут учиться, делиться своими знаниями и строить свою карьеру.

Посетить Stack Exchange

2. 0
3. +0
6. Авторизоваться Зарегистрироваться

Webmasters Stack Exchange — это сайт вопросов и ответов для профессиональных веб-мастеров. Регистрация займет всего минуту.

Зарегистрируйтесь, чтобы присоединиться к этому сообществу

Кто угодно может задать вопрос

Кто угодно может ответить

Лучшие ответы голосуются и поднимаются наверх

Спросил 10 лет, 5 мес назад

Просмотрено 5к раз

В настоящее время часто то, что было выполнено с помощью тега , теперь выполняется с помощью чего-то вроде