不增加服务器处理负担的圆角头像CSS解决方案|CSSer课堂

不增加服务器处理负担的圆角头像CSS解决方案

一月 28th, 2010 by San in User Experience, Web Standard |

本着不增加服务器开销，负担的原则，考虑使用CSS来处理用户头像，相册等。
圆角头像，是可以通过CSS技巧来实现的，并且浏览器兼容性佳！

看看效果图片如何？
3face

看着还行，对吧?

一下为运行代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圆润头像</title> <style type="text/css"> body{ background:#000; color:#fff; } .avatar{ padding:15px; background:#fff; } /* face */ .face1,.face2,.face3{ position:relative;/* 相对定位，给em一个定位基线 */ } /* face img */ .face1 img,.face2 img,.face3 img{ padding:3px; } /* face em */ .face1 em,.face2 em,.face3 em{ position:absolute; top:0; left:0; width:100%; height:100%; } /* face 1 */ .face1{ width:126px; height:126px; } .face1 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face1.png) no-repeat; } /* face 2 */ .face2{ width:54px; height:54px; } .face2 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face2.png) no-repeat; } /* face 3 */ .face3{ width:36px; height:36px; } .face3 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face3.png) no-repeat; } </style> </head> <body> <div class="avatar"> <div class="face1"> <img src="http://static1.139js.com/system/avatar/19642548/200/1263120798344124.jpg" width="120" height="120" /><em> </em> </div> <div class="face2"> <img src="http://static1.139js.com/system/avatar/19642548/48x48/1263120798344124.jpg" width="48" height="48" /><em> </em> </div> <div class="face3"> <img src="http://static1.139js.com/system/avatar/19642548/48x48/1263120798344124.jpg" width="30" height="30" /><em> </em> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

在以上的图片圆角框处理中，有一个技巧。
图片圆角框上下左右都会预留一个空间，而这个尺寸恰好是头像图片中CSS的padding值。
/* face img */ .face1 img,.face2 img,.face3 img{ padding:3px; }
这样处理后，方便让圆角框正好遮住目标图片。

似乎上面的例子中，还可以在此减少服务器的开销，对。可以把圆角框拼接起来，成为一张图片。原理CSS Sprite,运行一下第二个优化方案。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>圆润头像 2</title> <style type="text/css"> body{ background:#000; color:#fff; } .avatar{ padding:15px; background:#fff; } /* face 相对定位，给em一个定位基线 */ .face1,.face2,.face3{ position:relative; } /* face img */ .face1 img,.face2 img,.face3 img{ padding:3px; } /* face em */ .face1 em,.face2 em,.face3 em{ position:absolute; top:0; left:0; width:100%; height:100%; } .face1{ width:126px; height:126px; } .face2{ width:54px; height:54px; } .face3{ width:36px; height:36px; } .face1 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face.gif) 0 0 no-repeat; } .face2 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face.gif) 0 -126px no-repeat; } .face3 em{ background:url(http://blog.owncsser.com/wp-content/uploads/2010/01/face.gif) 0 -180px no-repeat; } </style> </head> <body> <div class="avatar"> <div class="face1"> <img src="http://static1.139js.com/system/avatar/19642548/200/1263120798344124.jpg" width="120" height="120" /><em> </em> </div> <div class="face2"> <img src="http://static1.139js.com/system/avatar/19642548/48x48/1263120798344124.jpg" width="48" height="48" /><em> </em> </div> <div class="face3"> <img src="http://static1.139js.com/system/avatar/19642548/48x48/1263120798344124.jpg" width="30" height="30" /><em> </em> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

Tags: avatar, CSS Sprite, face, 圆角头像

Trackback URI | Comments RSS

CSSer课堂