Фрагмент фона карты спрайта CSS

Question

У меня есть спрайт-карта. В этой карте спрайтов есть фрагмент размером 1x1px, который мне нужно использовать для создания фона для элемента (т.е. повторяется).

Предоставляет ли один только CSS решение для этого? Мне интересно, даже если это футуристично и будет работать только в IE12. Для тех, кто не знает, что такое спрайт-карта, я привел пример.

https://static.anuary.com/9429dc4e7a395b6443ae58919f1416523a9a798dd54931cb0e5ed70c582766a4/public/images/sprite.png.

Answer 1

Вы можете попробовать использовать псевдоэлементы CSS before или after вместо использования тегов-заполнителей

.icon::after {
    position:relative;
    display:inline-block;
    overflow:hidden;
    content:" ";
    width:21px;
    height:24px;
    background:url(images/icons.png) -1000px -1000px no-repeat;
}
.icon::after {
    background-position: -14px -24px;
}

Answer 2

Я не знаю какого-либо конкретного метода, который позволил бы вам обрезать часть изображения, чтобы поместить его в качестве фона элемента.Поскольку у вас есть только фрагмент размером 1px x 1px, почему бы вам не использовать стандартное свойство background-color или не хранить для этой цели отдельный рисунок?Я предпочитаю свойство background-color CSS, поскольку вы, похоже, имеете дело со сплошным цветом.

Вы также можете перейти на CSS3.info , чтобы увидеть, что будет.