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

Question

slick official

我定制了光滑的点导航并使其成为一个图像。 它计划如下：

但现在

哎呀 active的形象应该减少一半，但它不会变小.. 在开发人员工具中，它是一个神秘的数字10px，没有设置为towidth或height。

我如何使这个神秘的10px无效？

---

slick.js code（链接到github代码）

看似相关的DOM：

---

在我的脑海里，徘徊时

我想让它感觉像这样。我在::before中插入了insideBlack按钮并用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支持extremely well。

使用逗号分隔的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;
}

我写了一个独立的例子here。

更新

在将鼠标悬停在按钮上时，在了解了您想要对内部背景的不透明度做什么之后，我做了一些更改。基本上，我不再在同一元素上使用多个背景。我将其中一个背景移动到了::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