这个很简单，用圆角就可以啦，我帮你写出来吧，看代码:
<html><head>
<style type="text/css">
div.icon
{
width:200px
height: 200px
display:block
position: relative
float:left
padding: 0px
margin: 10px
background: #e9e7e0
}
div.icon_head
{
width:150px
height: 150px
display:block
position: relative
float:left
padding: 0px
margin: 25px
background: #bde9df
border-radius:75px
-webkit-border-radius:75px
-moz-border-radius:75px
-o-border-radius:75px
-webkit-background-clip: padding
overflow:hidden
}
a.trans_name
{
width:150px
height: 150px
display:block
position: absolute
left: 0px
bottom: 0px
padding: 0px
margin: 0px
z-index:1
filter: Alpha(Opacity=0)
opacity:0
}
span.icon_translucent
{
width:150px
height: 60px
display:block
position: absolute
left: 0px
bottom: 0px
padding: 0px
margin: 0px
background: #000000
z-index:2
filter: Alpha(Opacity=50)
opacity:0.5
}
span.icon_name
{
width:150px
height: 60px
display:block
position: absolute
left: 0px
bottom: 0px
padding: 0px
margin: 0px
color: #ffffff
font-size: 16px
text-align: center
line-height: 40px
z-index:3
}
a.trans_name:hover
{
filter: Alpha(Opacity=100)
opacity:1
}
</style>
</head>
<body>
<div class="icon">
<div class="icon_head">
<img src="http://t3.qpic.cn/mblogpic/33b2836395e33a0a1dc8/160" width="150" height="150" />
<a class="trans_name">
<span class="icon_translucent"></span>
<span class="icon_name">隔城府窥红颜</span>
</a>
</div>
</div>
</body>
</html>
记得采纳，纯手写的，谢谢！！！！
头像调用格式为：<!--{avatar(用户ID,大图(big)/中图(middle)/小图(small))}-->
在模板里面调用：
<img src="<!--{avatar(18,small)}-->" />--- uid为18的用户的小头像
<img src="<!--{avatar($_SGLOBAL[supe_uid],big)}-->" />---- 当前登录用户的大头像
多看看康盛默认的模板，会学习到很多。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）