说到CSS控制图标颜色，我们自然而然会想到icon fonts, 或者使用SVG sprites技术，或者使用混合模式来实现。然而，都是有不足的，SVG的兼容性以及混合模式的理解成本和环境限制等。

因此，转了一圈，会发现，有时候，还是图片来得最实在，且看下面demo实现的效果，虽然使用的是background-image实现的，但是hover态，selected态都和文字hover transition过渡，这是传统背景图片所没法实现的。

演示效果：https://mrju.cn/css/transition-img/
css代码部分：

.type {
    max-width: 1000px; min-width: 600px;
    margin: 60px auto;
    font-size: 16px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}
.type_li {
    width: 25%;
    color: #666;
    float: left;
    transition: color .25s;
}
.type_li:hover {
    color: #000;
    text-decoration: none;
}
.type_li.selected {
    color: #00a5e0;
}
.icon_type {
    display: inline-block;
    height: 140px;    
    background-color: #c8c8c8;
    transition: background-color .25s;
    overflow: hidden;
}
.icon_type:after {
    position: relative;
    content: url(icons-verify-type.png);
}
.icon_type_2:after {
    top: -140px;
}
.icon_type_3:after {
    top: -280px;
}
.icon_type_4:after {
    top: -420px;
}
a:hover .icon_type {
    background-color: #666;
}
a.selected .icon_type {
    background-color: #00a5e0;
}

html代码部分：

<div id="type" class="type">
    <a href="javascript:" class="type_li">
        <i class="icon_type icon_type_1"></i>
        <h6>企业</h6>
    </a>
    <a href="javascript:" class="type_li">
        <i class="icon_type icon_type_2"></i>
        <h6>网店商家</h6>
    </a>
    <a href="javascript:" class="type_li">
        <i class="icon_type icon_type_3"></i>
        <h6>媒体</h6>
    </a>
    <a href="javascript:" class="type_li">
        <i class="icon_type icon_type_4"></i>
        <h6>其他组织</h6>
    </a>
</div>

js代码部分：

if (document.querySelector) {
    var elTypeAs = document.querySelectorAll('#type a');
    for(var startA=0; startA<elTypeAs.length; startA+=1) {
        elTypeAs[startA].onclick = function() {
            var eleSelected = document.querySelector('#type .selected');
            if (eleSelected) eleSelected.className = 'type_li';
            this.className = 'type_li selected';
            return false;
        };
    }
}

原文来自：CSS镂空图片transition过渡初加载背景色块问题解决