油滑滑塊活躍滑塊的顏色變化

Question

我的工作用油滑滑塊，在這裏，我想實現高亮顯示當前滑塊圖像，需要淡出剩餘滑塊圖像

Expecated結果是

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

的opacity已被設置爲background顏色相同的元素，所以顏色的幸福「稀釋」爲.slick-slide被做成半透明。

我能想到去改變它會添加規則狀的最快方法：

.carousel { 
    background-color: #000 
} 

並從.slick-slide的background。通過這種方式，不透明會淡化圖像，黑色背景將不受影響。

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