您的位置：首页 > Web前端 > CSS

CSS从图标集里截取某一图标

2015-09-06 19:49 567 查看
因为图标文件数量多，文件小，能将相关图标继承到单一图标文件里，指定图标位置，让CSS从图集里截取出来，这能大大方便图标的管理



本图标集每个图标宽度16px，高度17px

CSS语句

.iconset{
background: url(images/IconPageTools.png) no-repeat;
width: 16px;
line-height: 17px;
display: inline-block;
}

.icon_facebook{
background-position: 0px 0px;
}

.icon_youtube{
background-position: 0px -102px;
}

html使用示例
<body>
<p>facebook icon below</p>
<form id="form1">
<div class="iconset icon_facebook">
 
</div>
</form>

<p>youtube icon below</p>
<form id="form1">
<div class="iconset icon_youtube">
 
</div>
</form>

</body>
</html>

结果显示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航