不使用css3属性实现圆角头像效果的方法介绍

不使用css3属性实现圆角头像效果的方法介绍

1714发表于2016-06-25

了解过css3的同学对css的border-radius这个属性应该都知道,在css3下实现圆形是很简单的。

border-radius: 50%;

上面代码如果是一个张正方形的图片就会是一个正圆,如果是一张长方形就会椭圆。

今天我就来介绍一种利用背景图片实现圆角头像效果,这种方法有一个好处是低版本的浏览器也可以兼容,因为css3的在很多低版本的浏览器是不支持的。

先来看最终效果。


其实上面是用两张图片,一张是头像图片,圆角是用的背景图片。


头像真正图片如下:


背景图片

这张圆的中间区域是透明的。这样就可以把中间的图案显示出来,面外面是不透明达到一个遮罩的效果,这也是本例最巧妙的地方 。

两张图片重叠


下面来看一下页面元素布局:


可以看到在img上面写了一个空的div类为portrait-over,这个类的样式为:

把圆的背景所在div设置为绝对定位,这样就不会占用文档流的空间,也让两张图片完美的叠在了一起。


小编蓝狐