CSS变换背景色镂空

http://www.zhangxinxu.com/wordpress/2013/07/css-%E8%83%8C%E6%99%AF%E8%89%B2%E5%9B%BE%E7%89%87%E9%95%82%E7%A9%BA%E6%8A%80%E6%9C%AF/

看下图所示的效果截图

问题：这些小图标是如何实现的呢？

当下，我们一般的做法是，打开photoshop，把这些图标抠出来，然后周边透明，以用在各种背景上。

然而，[推特]的上图效果是相反的做法，图标形状区域是透明镂空的，而周边是实色的。

这种实现的优点不言而喻，可以很自在得控制小图标的颜色，而这个控制就是CSS的 background-color .

.icon {
    display: inline-block;
    width: 16px; height: 20px;
    background-image: url(sprite_icons.png);
    background-color: #34538b; /* 该颜色控制图标的颜色 */
}
.icon1 { background-position: 0 0; }
.icon2 { background-position: -20px 0; }
.icon3 { background-position: -40px 0; }
.icon4 { background-position: -60px 0; }

<i class="icon icon1"></i><a href="##" class="link">返回</a>
<i class="icon icon2"></i><a href="##" class="link">刷新</a>
<i class="icon icon3"></i><a href="##" class="link">收藏</a>
<i class="icon icon4"></i><a href="##" class="link">展开图片</a>