@freeman0204

Как задать картинку (кнопке слайдера) через CSS-спрайт, если кнопка оформляется только через css?

Создал спрайт через онлайн генератор. Вот что получается.
HTML

<i class="sprite sprite-ar-menu"></i>
<i class="sprite sprite-ar-slider"></i>
<i class="sprite sprite-ar_head"></i>
.......

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

.sprite-ar-menu {
    width: 7px;
    height: 5px;
    background-position: 0 0;
}

.sprite-ar-slider {
    width: 16px;
    height: 31px;
    background-position: -7px 0;
}

.sprite-ar_head {
    width: 11px;
    height: 7px;
    background-position: -23px 0;
}
...........

Оформляю owl слайдер по его классам:

#owl-one .owl-prev {
    background: url(../img/ar-slider.png) no-repeat;
    width: 16px;
    height: 31px;
    position: absolute;
    right: 20px;
    top: calc(50% - 16px);
}

#owl-one .owl-next {
    background: url(../img/ar-slider.png) no-repeat;
    transform: rotate(180deg);
    width: 16px;
    height: 31px;
    position: absolute;
    left: 20px;
    top: calc(50% - 16px); 
}


но этих классов нет у меня в html они наверное в файле js самого слайдера. И куда мне вставлять эти теги не понятно.
<i class="sprite sprite-ar-menu"></i>
<i class="sprite sprite-ar-slider"></i>


Так же у меня есть файла для спрайтов и стилизации слайдера. Как мне быть? С файла с спрайтами удалить строки:

.sprite-ar-slider {
    width: 16px;
    height: 31px;
    background-position: -7px 0;
}


и добавить их в файл с оформлением слайдера?
  • Вопрос задан
  • 434 просмотра
Решения вопроса 1
Sergamers
@Sergamers
front-end
css стили спрайта частично замени стили слайдера. А конкретно ширину, высоту, фон и настрой позиционирование. Трогать сгенерированный шаблон слайдера в таком случае не потребуется.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы