почему спрайты не работают с общим фоном? - PullRequest
Новая
       44

почему спрайты не работают с общим фоном?

0 голосов
/ 04 января 2019

Так что для моего сайта hostup Я пытался добавить спрайты, так как у меня было более 25 изображений, и google pagepeed жаловался.Я решил свой sprire не отображать проблему, но я не уверен, почему.Почему вам приходится загружать изображение в каждый и все, чтобы тратить пропускную способность и замедлять скорость страниц? 

.sprite {
    background-image: url(../img/spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-backup_icon {
    width: 60px;
    height: 60px;
    background-position: -5px -5px;
}

.sprite-cpanel_icon {
    width: 60px;
    height: 60px;
    background-position: -75px -5px;
}



.sprite {
    background-image: url(../img/spritesheet.png);
    background-repeat: no-repeat;
    display: block;
}

.sprite-backup_icon {
    width: 60px;
    height: 60px;
	background: url(../img/spritesheet.png);
    background-position: -5px -5px;
}

.sprite-cpanel_icon {
    width: 60px;
    height: 60px;
	background: url(../img/spritesheet.png);
    background-position: -75px -5px;
}
HTML-код 
<div class="sprite-backup_icon"></div>

Итак, 2-й.работает просто отлично, но 1-й.не отображается ни одно изображение, просто пустое изображение с определенной шириной и высотой, почему это так?

1 Ответ

0 голосов
/ 04 января 2019

Чтобы ответить на ваш первый вопрос:

Если браузер найдет изображение в таблице стилей, он загрузит его и сохранит в кэше браузера.В следующий раз, когда это же изображение будет найдено / запрошено в таблице стилей с того же URL-адреса (даже при той же начальной загрузке страницы), оно будет передано из кэша.НЕ перезагружен.Таким образом, хотя у вас может быть spritesheet.png 3 раза в вашей таблице стилей, она загружается только один раз и не тратит пропускную способность или скорость загрузки страницы.

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

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

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

...