Как разместить SVG картинку на круг в слайдере slick arrows?

Question

[Sanzhar Bazarbek]

Добрый день! Хочу сделать подобное на слайдере slick.

Если картинку добавлять в background url, то круга просто не видно


Почему не вставил в html? Потому что код из slick добавляется автоматически

.slider2 {
    position: relative;
}

.slider2 .slick-arrow {
    font-size: 0;
    border: none;
    outline: none;
    position: absolute;
    top: -48px;
    right: 0;
    width: 56px;
    height: 56px;
    background-color: #f7f7f7;
    border-radius: 50%;
}

.slider2 .slick-arrow.slick-prev {
    margin-right: 65px;
    background: url('/img/left.png') center center no-repeat;
}

.slider2 .slick-arrow.slick-next {
    /* background: url('/img/right.png') center center no-repeat; */
}

Comments

[volucris1]

Какую картинку добавлять в background? Стрелку? Кружок?
Возможно картинка имеет фон, который всё перекрывает.
Порядок того, как накладывается элементы зависит от порядка этих элементов.
Можно с помощью z-index контролировать слои.

[Sanzhar Bazarbek]

volucris1, нужно стрелку наложить на кружок. Посмотрел в фотошопе, фона у стрелки нету.
Z-Index пытался, вроде ничего не получилось. Куда предлагаешь поставить?

[volucris1]

https://webformyself.com/prichiny-po-kotorym-z-ind... Sanzhar Bazarbek,

Answer 1

[Sanzhar Bazarbek]

https://webformyself.com/prichiny-po-kotorym-z-ind...