WEB前端

用CSS3跨浏览器创建圆形Avatar头像

位置:首页 > WEB前端 > css3教程,2013-07-26
用CSS3跨浏览器创建圆形Avatar头像,实现这种效果的方法是提前做好一个圆角矩形图片,然后使用CSS当中的background-image属性将做好的图片设置为背景图片。那如果我要做成下图这样的圆...
用CSS3跨浏览器创建圆形Avatar头像,

实现这种效果的方法是提前做好一个圆角矩形图片,然后使用CSS当中的background-image属性将做好的图片设置为背景图片。那如果我要做成下图这样的圆形的效果,该如何实现呢?

rounded avatar.jpg

在CSS3出现以前,这个问题的答案是否定的。原因是你尽可以给头像图标添加圆形的背景,但是你却无法改变调用的头像图标本身的形状,它永远都是方方正正的,你只能改变它的大小。幸运的是,我们现在有了CSS3这个比CSS2功能更为强大的工具。虽然目前并非所有的浏览器都支持CSS3的所有属性,但是利用CSS3属性配合一些简单的hack,我们可以给图片元素应用圆角的效果,将方方正正的图片变成圆形的,最终实现我们所期望的结果。

这里我们要用到CSS3中的边框半径属性(border-radius),关于CSS3的一些常用属性,《基础CSS3》这篇文章讲的很清楚。如果你想了解CSS3更多,请认真阅读这篇文章。

下面我们就来看看如何使用CSS3的border-radius属性创建圆形的Avatar头像图标。

一、目标

使用CSS3的border-radius属性作出上图的圆形头像图标效果。

二、障碍

经过我的测试,IE对border-radius属性完全不支持,甚至包括IE9;Firefox和Opera仅支持边框的圆角,不支持图片的圆角;Safari和Chorme是对该属性支持最好的浏览器,即支持边框的圆角,也支持图片的圆角效果。(如下图)

representation.jpg

三、解决方法

按照webdesignerwall上面提供的方法我试了一下,可以解决Firefox和Opera浏览器的问题,但是IE丝毫不受影响,仍然表现为方方正正的图片,不过这样也好,起码解决了边框是圆的,而图片确是方的这种不伦不类的问题。

具体方法为:将图片元素包围在一个<div>标签内,将原图片作为背景图片添加给这个<div>标签,再将原来插入的<img>图片的透明度设置为0,或者设置为display:none;推荐降低透明度的方法,这样不会影响图片的查看和下载。

   <div class="img" style="background:url(avatar.jpeg) no-repeat;">
   <img src="avatar.jpeg" style="opacity:0"/>
   </div>

TAGS:浏览创建css3圆形csscss3浏览器border

猜你喜欢

NewHot手机版