我在2011年前后，兼管了一段时间前端开发，从当时的同事了解到，CSS 背景有很多学问，比如将众多的 ICON 合并输出到一个 PNG 上，通过坐标定位读取需要的元素，这样可以减少 HTTP 请求，优化网络加载。很老的技术，十年过去了，我却没有学会。今天登录 115 网盘，发现不错的示范，也彻底理解了这个问题。

CSS3 真的进步很大，在写法上，引入了正则表达式的思想，真的是不努力，变 IE！如今微软重生，Edge 在全网收获好评，可贺。

115 首页登录模块，其它方式登录的 HTML 结构：

<div class="list-other-login" rel="list_other_login">
    <div class="items">
        <a thirdpart="wechat"><i class="icon-other-wechat"></i>微信</a>
        <a thirdpart="qq"><i class="icon-other-qq"></i>QQ</a>
        <a thirdpart="sina"><i class="icon-other-weibo"></i>微博</a>
        <a thirdpart="sms"><i class="icon-other-sms"></i>短信</a>
    </div>
</div>

CSS 定义：

.list-other-login .items a {
    display: inline-block;
    color: #666;
    font-size: 12px;
    margin: 0 12px;
    line-height: 20px;
}

.items [class^=icon-other][class$=wechat] {
    background-position-x: 0;
}

.items [class^=icon-other][class$=qq] {
    background-position-x: -32px;
}

.items [class^=icon-other][class$=weibo] {
    background-position-x: -64px;
}

.items [class^=icon-other][class$=sms] {
    background-position-x: -96px;
}

.items [class^=icon-other] {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 3px;
    overflow: hidden;
    background-image: url(assets/img/icon_login_other.svg);
    background-repeat: no-repeat;
    background-size: auto 32px;
}

背景图片用的 SVG，制作精良。

本文代码版权归 115 所有，感谢！

附，一个时代的标识，雨林森风：