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

Question

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

预期结果是

http://i66.tinypic.com/20znsx1.png

创建的小提琴是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

whatever[[[...]]已设置在与whatever[["a"]]颜色相同的元素上，因此当opacity变为半透明时，颜色会被“稀释”。

我可以考虑改变它的最快方式是添加一条规则：

background

并从.slick-slide中删除.carousel { background-color: #000 } 。这样，不透明度将淡化图像，黑色背景将不受影响。

Answer 2

也许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;
}