Jquery 在slick.js'；自定义点导航，活动点的宽度'；不匹配

我定制了slick的点导航，并将其制作成图像。
计划是这样的：

但是现在

哎呀

active

的图像应该减少一半，但不会变小。
在开发者工具中，它是一个神秘的数字

10px

，没有设置为

width

或

height

.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;
}

我怎样才能使这个神秘的

10px

无效

---

（链接到github代码）

似乎相关的DOM：

---

在我的脑海里，当徘徊
我想让它有这样的感觉。 我在

：：before

中插入了insideBlack按钮，并用

：hover

修改了

不透明度，但以我的方式，没有留下任何外部按钮

当insideBlack按钮处于
悬停状态时，如何使外部按钮保持原样，使其透明


我的代码
CSS

jQuery

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


最后

多谢各位

稍微定制一下，最终看起来是这样的。

黑色圆圈的轻微偏差可通过
背面可见性来修复：隐藏

.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;
}

您实际需要的是使用多个背景图像，
CSS
支持这些图像

使用逗号分隔列表指定多个背景图像
背景图像属性的值的集合，每个值
生成一个单独的“背景层”。中的第一个值
列表表示最顶层（离用户最近），带有后续
在后面依次渲染层

为了正确排列，我需要使用外部图像的
10px
维度

.px单选li.slick-active按钮{
背景图片：url(https://mqs2.com/box/code/img/pxradio-n.svg)，网址(https://mqs2.com/box/code/img/pxradio-c.svg);
背景尺寸：10px，4.5px；
背景重复：无重复；
背景位置：中心，中心；
}


我写了一个独立的例子

更新
在了解了当鼠标悬停在按钮上时，你想对内部背景的不透明度做些什么之后，我做了一些更改。基本上，我不再在同一个元素上使用多个背景。我将其中一个背景移动到
：：before
，这样我就可以在不影响外圈的情况下使用不透明度。活动按钮不是
position:relative
，因此我在该相对容器内以绝对位置将内点居中

本例有一个始终存在的
active
状态，但您可以使用此代码轻松修改自己的工作。请注意
活动按钮的悬停状态


li按钮{
文本缩进：-9999px；
边界：0；
背景：url（“https://mqs2.com/box/code/img/pxradio-n.svg");
显示：块；
高度：9px；
宽度：9px；
大纲：无；
填充物：5px；
光标：指针；
}
li.活动按钮{
位置：相对位置；
}
li.active按钮：：之前{
内容：''；
背景图片：url(https://mqs2.com/box/code/img/pxradio-c.svg);
背景重复：无重复；
背景位置：中心；
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
宽度：4.5px；
高度：4.5px；
}
li.active按钮：悬停：：之前{
不透明度：.3；
}
/*忽略*/
ul{margin:0；列表样式：无；显示：flex；}
li{右边填充：1em；}
html{margin:2em；}




嘿，又是我。你有工作网页的链接吗？@Andy Hoffman嘿！你好。因为它仍然是本地的，临时的向上链接->第一个可见页面有这个点导航。谢谢！：D我如何才能像第一幅图像那样重叠显示这个小黑圈图像，并将其
激活
或
悬停
？我没有使用我知道的
position:relative
和
position:absolute
。哦，我明白了！谢谢！：）我想让黑色按钮在悬停时看起来是透明的（参考添加的图像），但我不能用我自己的力量来做，我想这样做。我该怎么办？@POP查看最新更新。我想这就是你想要的。哦！它是这样使用的！最终，它变成了最后一次更新。我真的很感谢你！！除息的