Не получается сделать спрайт css. Что не так (см. код)?

Mahol
На сайте с 20.11.2016
Offline
66
216

Всем доброго дня, можете помочь разобраться со спрайтами? Есть код, нужно заменить картинку на спрайт, но не пойму, как именно.

Вот код:

<div class="class1" style="margin:-28px 0px 0px 1110px;"><table>

<tbody>
<tr>
<td><a href="https://www.instagram.com/plus.vrn/" target="_blank" rel="noopener noreferrer"><img class="brighten alignnone wp-image-5210 size-full" src="https://site.ru/wp-content/uploads/2019/04/inst3.png" alt="" width="20" height="20" /></a>

<a class="brighten" href="https://vk.com/public167" target="_blank" rel="noopener noreferrer"><img class="brighten alignnone wp-image-5211 size-full" src="https://www.site.ru/wp-content/uploads/2019/04/vk3.png" alt="" width="20" height="20" /></a></td>
</tr>
</tbody>
</table></div>

Код, который выдал генератор спрайтов:

.bg-inst3 {

width: 20px; height: 20px;
background: url('css_sprites.png') -80px -10px;
}

Делал так (2 варианта):

<div class="class1" style="margin:-28px 0px 0px 1110px;"><table>

<tbody>
<tr>
<td><a href="https://www.instagram.com/plus.vrn/" target="_blank" rel="noopener noreferrer"><div class="bg-inst3" ></div></a>

<a class="brighten" href="https://vk.com/public167" target="_blank" rel="noopener noreferrer"><img class="bg-inst3"></a></td>
</tr>
</tbody>
</table></div>

Не работает. Что неправильно делаю?

SS
На сайте с 15.12.2015
Offline
62
#1

Картинку загрузили?

Размещение естественных ссылок на тематических порталах, отзовиках, справочниках (/ru/forum/1013919)
S
На сайте с 30.09.2016
Offline
469
#2
Mahol:
Что неправильно делаю?

У vk и инсты должны быть разные классы, а в коде один и тот же – bg-inst3.

Отпилю лишнее, прикручу нужное, выправлю кривое. Вытравлю вредителей.
Mahol
На сайте с 20.11.2016
Offline
66
#3

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

S
На сайте с 30.09.2016
Offline
469
#4

Ну и смотри в инструментах разработчика, что не так. Если background, то div, из этих вариантов.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий