преобразование моей навигационной панели в CSS спрайты - PullRequest
Новая
       31

преобразование моей навигационной панели в CSS спрайты

0 голосов
/ 24 января 2011

на данный момент панель навигации моего сайта состоит из тегов 'img', обернутых в теги 'a'. У каждого img есть функция javascript для отображения ролловера img. Таким образом, в целом браузер должен загрузить 18 изображений, что составляет 18 HTTP-запросов, что, очевидно, очень неэффективно.

Я хочу использовать 1 изображение с фоновым изображением css и псевдоклассом: hover.

Проблема в том, что если я использую только 'a' с фоновым изображением, я не могу установить высоту и ширину. И если я установлю это 'a' для отображения: блок, чем это разрушает поток страницы. Есть ли способ использовать css {background-image}, сохраняя все в строке?

если нет, что мне делать?

вот сайт: www.thetempers.net

Ответы [ 3 ]

0 голосов
/ 24 июня 2012

Вы можете применить display: inline-block, который заставит ваш a вести себя как img.

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

#nav-bar a {
  display: inline-block;
  background: [...];
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=80)";
  filter: alpha(opacity=80);
  opacity: 0.8;
}

#nav-bar a:hover {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

Вы можете пойти на компромисс с 9 запросами или уменьшить размер файла, если вы используете спрайты с этой техникой.

0 голосов
/ 24 июня 2012

Вы также можете использовать display: inline-block; вместо display: block; float: left;, но это не будет работать в старых браузерах, например. IE <8.0. Вы можете проверить <a href="http://caniuse.com/inline-block" rel="nofollow"> здесь для поддержки браузера.

Спрайты минимизируют количество запросов к серверу. Таким образом, сервер использует меньше циклов ЦП, а передаваемые данные немного меньше. Самое большое преимущество для пользователей в том, что они получают ваш сайт быстрее. Это работает так, что большинство браузеров по умолчанию делают только несколько запросов на один и тот же сервер одновременно. Поэтому браузер запрашивает первые несколько файлов и запрашивает следующий файл только после завершения загрузки одного из них. 18 файлов - это довольно много.

0 голосов
/ 24 января 2011

Как правило, если вы хотите установить ширину / высоту так, как вы ожидали, вам нужно установить на дисплей блокировку.

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

Так что попробуйте применить также float: left к ним, а затем поиграйтесь с полями, чтобы получить правильный интервал.

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

...