в пользовательской точечной навигации slick.js ширина активного не совпадает

Question

пятно официальное

Я настроил точечную навигацию пятна и сделал его изображением.
И это должно было быть так:

Но сейчас

упс
Изображение active должно было быть уменьшено вдвое, но оно не уменьшается ..
В инструменте разработчика это было загадочное число 10px, для которого не было установлено значение width или height.

Как я могу лишить законной силы этот таинственный 10px?

---

код slick.js (ссылка на код github)

DOM, который, кажется, связан:

---

На мой взгляд, при наведении

Я хочу, чтобы это было похоже на это. Я вставил внутри черную кнопку в ::before и поиграл opacity с :hover, но на моем пути не осталось внешней кнопки ..

Как сделать прозрачность такой, когда кнопка insideBlack имеет значение hover, оставляя внешнюю кнопку нетронутой?

---

Мой код

CSS

.pxradio {
  position: absolute;
  bottom: -55px;
  list-style: none;
  display: block;
  text-align: center;
  padding: 0;
  margin: 0;
  width: 100%;
 }
 .pxradio li {
  position: relative;
  display: inline-block;
  margin: 0 10px;
  padding: 0;
  cursor: pointer;
 }
.pxradio li button {
  text-indent: -9999px;
  border: 0;
  background: url("../img/radio-outside.svg");
  display: block;
  height: 9px;
  width: 9px;
  outline: none;
  padding: 5px;
  cursor: pointer;
 }
.pxradio li button:hover, .pxradio li button:focus {
  outline: none;
 }
.pxradio li.slick-active button {
  background: url("../img/radio-insideBlack.svg");
  width: 4.5px;
  height: 4.5px;
  opacity: 1;
 }

JQuery

$(function(){
  $('#carousel').slick({
    dotsClass: 'pxradio',
  });
});

---

Наконец

Большое спасибо!
Слегка настроенный, и в итоге это выглядело так.
Небольшое отклонение черного круга может быть исправлено на backface-visibility: hidden;.

.pxradio li button {
  position: relative;    /* Add */
  text-indent: -9999px;
  border: 0;
  background: url("../img/pxradio-n.svg");  /* =radio-outside.svg */
  display: block;
  height: 9px;
  width: 9px;
  outline: none;
  padding: 5px;
  cursor: pointer;
}
.pxradio li button:hover, .pxradio li button:focus {
  outline: none;
}
.pxradio li button::before {    /* ▼ Add everything from here */
  position: absolute;
  content: '';
  background-image: url("../img/pxradio-c.svg");    /* =radio-insideBlack.svg */
  background-repeat: no-repeat;
  background-position: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3.5px;
  height: 3.5px;
  opacity: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.pxradio li button:hover::before {
  opacity: .2;
}
.pxradio li.slick-active button {
  background: url("../img/pxradio-n.svg"), url("../img/pxradio-c.svg");
  background-size: 10px, 4.5px;
  background-repeat: no-repeat;
  background-position: center, center;
  pointer-events: none;
}

Answer 1

На самом деле вам нужно использовать несколько фоновых изображений, которые CSS поддерживают очень хорошо .

Несколько фоновых изображений указываются с помощью списка через запятую значений для свойства background-image, с каждым значением создание отдельного «фонового слоя». Первое значение в список представляет верхний слой (ближайший к пользователю), с последующим слои отображаются последовательно.

Для правильного выравнивания, мне нужно было использовать размер 10px для внешнего изображения.

.pxradio li.slick-active button {
  background-image: url(https://mqs2.com/box/code/img/pxradio-n.svg), url(https://mqs2.com/box/code/img/pxradio-c.svg);
  background-size: 10px, 4.5px;
  background-repeat: no-repeat;
  background-position: center, center;
}

Я написал отдельный пример здесь .

Обновление

Узнав о том, что вы хотели сделать с непрозрачностью для внутреннего фона при наведении курсора на кнопку, я внес некоторые изменения. По сути, я больше не использую несколько фонов для одного элемента. Я переместил один из фона на ::before, чтобы использовать его на непрозрачности, не затрагивая внешнее кольцо. Активная кнопка не является position: relative, поэтому я центрую внутреннюю точку с абсолютным позиционированием в этом относительном контейнере.

Этот пример имеет состояние active, которое всегда присутствует, но вы можете легко изменить свою собственную работу, используя этот код. Обратите внимание на состояние наведения кнопки active.

li button {
  text-indent: -9999px;
  border: 0;
  background: url("https://mqs2.com/box/code/img/pxradio-n.svg");
  display: block;
  height: 9px;
  width: 9px;
  outline: none;
  padding: 5px;
  cursor: pointer;  
}

li.active button {
  position: relative;
}

li.active button::before {
  content: '';
  background-image: url(https://mqs2.com/box/code/img/pxradio-c.svg);
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4.5px;
  height: 4.5px;
}

li.active button:hover::before {
  opacity: .3;
}

/* Ignore */
ul { margin: 0; list-style: none; display: flex; }
li { padding-right: 1em; }
html { margin: 2em; }

<ul>
  <li><button></button></li>
  <li class="active"><button></button></li>
  <li><button></button></li>
</ul>

jsFiddle