Question

我的图标上有这个过滤器

.uiicon {
    filter:invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -webkit-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -moz-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -o-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    -ms-filter: invert(51%) sepia(100%) hue-rotate(153deg) saturate(100%);
    width:64px;
    height:64px;
    display:inline-block;
}

它表现很好并且做了它想做的事。

但是当我向一个类添加一个额外的过滤器时，它完全覆盖了前一个过滤器而不是很好的级联

.icon1 {
    background-image: url('uiicons/%20(1).png');
    -webkit-filter:drop-shadow(12px 12px 7px rgba(0,0,0,0.5));
 }

除了制作混合课程外，还有办法吗？我真的不喜欢代码重复的想法......

修改

我有兴趣了解是否有本地方式来实现这一目标。我对css预处理器或javascript解决方案不感兴趣。我知道怎么做。

添加过滤器而不覆盖以前的过滤器

0 个答案: