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

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

预期的结果是

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

创建小提琴是小提琴链接

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

不透明度正常,但左右图像是白色叠加而不是黑色,

在opacity已设置为相同元素background的颜色,所以颜色的幸福"稀释"作为.slick-slide被做成半透明.

我能想到改变它的最快方法是添加如下规则:

.carousel {
  background-color: #000
}

并取出background从.slick-slide.这样,不透明度将淡化图像,黑色背景将不受影响.