javascript - 光滑的 slider 事件 slider 颜色变化

Question

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

预期结果是

创建的 fiddle 是 Fiddle link

我添加了以下 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;
}

不透明度有效，但左右图像叠加为白色而不是黑色，

Answer 1

opacity 已在与 background 颜色相同的元素上设置，因此颜色被“稀释”为 .slick-slide 变得半透明。

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

.carousel {
  background-color: #000
}

并从 .slick-slide 中移除 background。这样，不透明度会使图像变淡，而黑色背景不会受到影响。