发表于2016-06-25
了解过css3的同学对css的border-radius这个属性应该都知道,在css3下实现圆形是很简单的。
border-radius: 50%;
上面代码如果是一个张正方形的图片就会是一个正圆,如果是一张长方形就会椭圆。
今天我就来介绍一种利用背景图片实现圆角头像效果,这种方法有一个好处是低版本的浏览器也可以兼容,因为css3的在很多低版本的浏览器是不支持的。
先来看最终效果。
其实上面是用两张图片,一张是头像图片,圆角是用的背景图片。
头像真正图片如下:
背景图片
这张圆的中间区域是透明的。这样就可以把中间的图案显示出来,面外面是不透明达到一个遮罩的效果,这也是本例最巧妙的地方 。
两张图片重叠
下面来看一下页面元素布局:
可以看到在img上面写了一个空的div类为portrait-over,这个类的样式为:
把圆的背景所在div设置为绝对定位,这样就不会占用文档流的空间,也让两张图片完美的叠在了一起。