css 下划线+文字浮于图片

下划线 距离

.currentItem{
　　color:rgb(255, 173, 47);
　　border-bottom:4px solid rgb(255, 173, 47); //下划线粗细
　　padding-bottom: 7px; //加距离
　　text-decoration:none;
}
.not_current{
　　text-decoration:none;
　　color:black;
}

<li ><a class="<?php echo $control == 'site'?'currentItem':'not_current';?>" href="<?php echo Yii::app()->createUrl('site/index'); ?>">COS介绍</a></li>

效果：

 

文字浮动于图片（两种方法）

方法一：做成div的背景图片，文字自然在其上。（坏处：图片宽高无法调整）

方法二：外层div用相对定位，里面的img用绝对定位，且Z-index:-1，即自动至于下层。文字相对定位随便放。