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>