图标: 文字的前缀图标 - 背景图片方式

老白 8个月前 394浏览 0评论

前缀背景图标CSS.png 图标: 文字的前缀图标 - 背景图片方式 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;相对定位去改变位置了。

发表评论