Как использовать CSS-спрайт без рамки в изображении - PullRequest
Новая
       30

Как использовать CSS-спрайт без рамки в изображении

0 голосов
/ 16 мая 2019

Я пытаюсь использовать изображение спрайта для оптимизации моего сайта.

Я использую формат PNG для моего изображения, и изображение выглядит так:

enter image description here

Мой код CSS выглядит так: 

.bg-upperbar_1 {
    width: 55px; height: 55px;
    background: url('../../assets/img/home/spritesheet.png') -10px -10px;
}

Мой HTML такой: 

<a class="home-upperbar home-top" href="<?php echo site_url('products/collection_watches'); ?>">
<img class="bg-upperbar_1">
</a>

Но когда я пытаюсь загрузить свою страницу, я получаю границу для картинки, даже если картинка в формате png, например:

enter image description here

Как решить эту проблему?

1 Ответ

0 голосов
/ 16 мая 2019

Причина, по которой вы получаете границу, заключается в том, что ваш <img> не имеет установленного атрибута src. Если вы хотите использовать спрайт-лист в качестве фонового изображения, вам необходимо прикрепить его к тегу <a>. 

.bg-upperbar_1 {
    width: 43px;
    height: 45px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -47px -42px;
}

a{
display:block;
}
<a class="home-upperbar home-top bg-upperbar_1" href="<?php echo site_url('products/collection_watches'); ?>">
</a>
...