• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

图标： 文字的前缀图标 - 背景图片方式_CSS学习

当前位置：网站建设 > 技术支持

文字前的图标，并且图标尺寸大于文字尺寸（高度）的情况下CSS：

<div class="time green">

     <i></i>限量抢，23点开放预热

    </div>

CSS：

.posts .time{height: 37px; line-height: 37px;text-align: center;font-size: 14px;border-bottom: 1px dashed #ededed;}

.posts .green{color: #39b98d;}

.posts .green i{display:inline-block;/*必须*/

 width: 18px; height: 18px;

 background: url(../images/greentime.png) no-repeat;

 position: relative;top: 3px;/*相对位置*/

 margin-right: 3px;

}

如果图标尺寸小于文字，甚至与文字高度一样的时候，就很容易，一旦图标尺寸明显大于文字，这时候就需要用到position: relative;相对定位去改变位置了。

版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。