背景色镂空技术与currentColor实例页面

回到相关文章 »

代码:

CSS代码:
.icon {
    display: inline-block;
    width: 16px; height: 20px;
    background-image: url(../201307/sprite_icons.png);
    background-color: currentColor; /* 该颜色控制图标的颜色 */
}
.icon1 { background-position: 0 0; }
.icon2 { background-position: -20px 0; }
.icon3 { background-position: -40px 0; }
.icon4 { background-position: -60px 0; }
.link { margin-right: 15px; }
.link:hover { color: #333; }/* 虽然改变的是文字颜色,但是图标颜色也一起变化了 */
                
HTML代码:
<a href="##" class="link"><i class="icon icon1"></i>返回</a>
<a href="##" class="link"><i class="icon icon2"></i>刷新</a>
<a href="##" class="link"><i class="icon icon3"></i>收藏</a>
<a href="##" class="link"><i class="icon icon4"></i>展开图片</a>