Desaturate和添加投影

Question

我试图完成与社交分享图标在我工作的网站上的两件事。

首先，我想添加阴影。那么我想让它们在默认情况下不饱和，并悬停着色。

下面是我使用的代码：

.a2a_floating_style.a2a_vertical_style img { 
-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)); 
    filter: url(#drop-shadow); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    -webkit-transition:all .4s; 
    -moz-transition:all .4s; 
    -ms-transition:all .4s; 
    -o-transition:all .4s; 
    transition:all .4s; 
} 

.a2a_floating_style.a2a_vertical_style img:not(:hover) { 
    -webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)); 
    filter: url(#drop-shadow); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    -webkit-filter:grayscale(100%); 
    -moz-filter:grayscale(100%); 
    -ms-filter:grayscale(100%); 
    -o-filter:grayscale(100%); 
    filter:grayscale(100%); 
} 
.a2a_floating_style.a2a_vertical_style img:hover { 
    -webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)); 
    filter: url(#drop-shadow); 
    -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')"; 
    -webkit-filter:grayscale(0%); 
    -moz-filter:grayscale(0%); 
    -ms-filter:grayscale(0%); 
    -o-filter:grayscale(0%); 
    filter:grayscale(0%); 
} 

它不饱和位，但没有阴影。如果我删除了去饱和指示，那么它的投影效果很好。

有没有一种方法，我应该组织这样做，所以这两种效果将工作？

谢谢。

Answer 1

您覆盖过滤器的CSS，而不是添加一个过滤器到现有的过滤器。通过去除一些CSS线的问题变得清晰：

-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)); 
-webkit-filter: grayscale(0%); 

但是，您可以通过将其与空格分开提供多个过滤器：

-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5)) grayscale(0%);