Javascript 滑动滑块活动滑块颜色更改

我正在使用slick slider，这里我试图突出显示当前的滑块图像，并需要淡出剩余的滑块图像

计算结果为：

小提琴是

我添加了以下css以获得结果

.slick-current.slick-active.slick-center {
    opacity:1;

}
.slick-slide  {
    opacity:0.5;
    background: #000;
    border-left:3px solid #fff;
    border-right:3px solid #fff;
}

---

不透明度正在发挥作用，但左右图像是白色覆盖而不是黑色，

不透明度设置在与背景颜色相同的元素上，因此颜色被“稀释”为

。光滑幻灯片

变为半透明

我认为最快的改变方法是添加如下规则：

.carousel {
  background-color: #000
}

---

然后将

背景

从

.slick幻灯片

中移除。这样，不透明度将使图像褪色，黑色背景将不受影响

已将

不透明度设置为与
背景颜色相同的元素，因此颜色与
一样被“稀释”。光滑幻灯片
变为半透明

我认为最快的改变方法是添加如下规则：

.carousel {
  background-color: #000
}

然后将
背景
从
.slick幻灯片
中移除。这样，不透明度将使图像褪色，黑色背景将不受影响
 也许css过滤器可以解决您的问题。怎么样

.slick-current.slick-active.slick-center {
    opacity:1;
  filter: brightness(1) !important;
}
.slick-slide  {
    opacity:1;
    background: #000;
  filter: brightness(.1);
    border-left:3px solid #fff;
    border-right:3px solid #fff;
}

也许css过滤器可以解决你的问题。怎么样

.slick-current.slick-active.slick-center {
    opacity:1;
  filter: brightness(1) !important;
}
.slick-slide  {
    opacity:1;
    background: #000;
  filter: brightness(.1);
    border-left:3px solid #fff;
    border-right:3px solid #fff;
}