HTML设置圆角头像,圆角头像的制作

好多sns的头像都使用圆角了，昨天在校内上看到了圆角头像，今天在Qzone的也看到了圆角头像，圆角头像看上去比直角的美观。

圆角头像的制作原理就是在头像上覆盖一张透明的图片，把四个角颜色设置成页面的背景颜色，中间透明，

假设我的页面底色是纯黑色的，那么这个透明图片可以做成这样，如图：

这里需要注意的是需要把图片保存成24位的png，虽然IE6支持8位的png的透明，但是8位的png做透明圆弧图片存在效果上的问题，就是存在白色的杂边或锯齿，如图：

，24位的png或32位的png的圆弧透明(半透明)图片则非常光滑，但是该死的IE6不支持24位的png或32位的png透明(其他浏览器都支持)，需要我们额外的一下处理；

IE6下处理24位的png或32位的png方方法有很多，我做了2种：

第一种：使用 AlphaImageLoader 筛选器：

html代码：

[code=”html”]

[/code]

CSS代码：

[code=”css”]

#circular-box{ margin: 50px;}

#circular-box li{ float:left; margin:0 20px; position:relative}

#circular-box li img{display:block}

#circular-box li span{position:absolute; top:0; left:0;width:200px; height:200px; background:url(circular.png) no-repeat; _background:none;_filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’circular.png’,sizingMethod=’crop’); cursor:pointer}

[/code]

这里需要注意的是：

使用?AlphaImageLoader 筛选器的元素必须有宽高，width:XXpx; height:XXpx;

ie6下必须充值背景为none，_background:none

第二种：使用widgetfx的方法：

html代码：

[code=”html”]

[/code]

CSS代码：

[code=”css”]

#circular-box{ margin: 50px;}

#circular-box li{ float:left; margin:0 20px; position:relative}

#circular-box li img{display:block}

#circular-box li span{position:absolute; top:0; left:0;width:200px; height:200px; background:url(circular.png) no-repeat; behavior:url(“iepngfix.htc”); cursor:pointer}

[/code]

这里需要注意的是：

页面头部需要引用iepngfix_tilebg.js；

在透明图片的元素上加：behavior:url(“iepngfix.htc”)；

更多方法请访问：

另：校内最新的该效果制作有的特别，在支持html5的浏览器上使用了Canvas,IE下是用VML,HTML 5画图基本上都靠canvas,而且需要js的支持。相关信息可以查看http://byzuo.com/blog/html5-canvas

HTML设置圆角头像,圆角头像的制作相关推荐

【CSS】盒子模型圆角边框 ( 通过设置 border-radius 样式设置圆角矩形圆角半径 )
文章目录一.盒子模型圆角边框二.代码示例 1.代码示例 - 正常矩形边框 2.代码示例 - 圆形边框 3.代码示例 - 圆角矩形边框 4.代码示例 - 综合对比示例一.盒子模型圆角边框在 CS ...
设置View单个圆角
#pragma mark - 设置View单个圆角 + (void)addCornerWithView:(UIView *)aView type:(UIRectCorner)aCorners size ...
Fulutter 设置圆角背景图片Container 设置边框、圆角、阴影
Fulutter 设置圆角背景图片&Container 设置边框.圆角.阴影在 Flutter 中,如何实现背景图片呢?又如何实现带圆角的背景图片呢? Fulutter 设置圆角背景图片使 ...
不用P图！用Python给头像加圣诞帽并制作成可执行软件！
文 | 闲欢来源:Python 技术「ID: pythonall」随着圣诞节的到来,节日气氛也越来越浓厚.大街上随处可见挂满饰品的圣诞树,好多小伙伴的头上也多了一顶红色牛角的圣诞帽. 往年在这个时 ...
将王者荣耀头像设置成和微信头像不一样
要将王者荣耀头像设置得和微信头像不一样怎么要做呢?因为游戏本身是无法自己设置头像的,所以玩家的头像都是和微信或者QQ相同,那么要怎么才能不一样呢?下面就来教程这里以微信为例: 首先我们需要在微信的设 ...
PS圆角制作 ps圆角矩形 ps圆角边框 ps做圆角 ps圆角处理
PS圆角制作 ps圆角矩形 ps圆角边框 ps做圆角 ps圆角处理以上是效果方法如下: 1:用photoshop打开原图,并取消背景锁. 2:选"工具栏"的"圆角矩形 ...
Gravatar头像-网站头像设置详解
关于Gravatar头像头像,其实本不想写什么的,不过对于很多来我网站的一些陌生人啊什么的,或者说那些注册的...有一些还是没有头像的,于是乎就决定到处copy下弄来这样的文章... Gravatar ...
echarts柱形图x轴y轴互换_Echarts Y轴底纹改为虚线与设置柱状图为圆角
1.Echarts Y轴底纹改为虚线: yAxis: { splitLine :{ //网格线 lineStyle:{ type:'dashed' //设置网格线类型 dotted:虚线 solid: ...
怎样使用css让矩形出现圆角,CSS中设置元素的圆角矩形
圆角矩形介绍在CSS中通过border-radius属性可以实现元素的圆角矩形. border-radius属性值一共有4个,左上.右上.左下.右下. border-radius属性值规则如下:第一 ...
android picasso圆角,Picasso设置的圆角，圆角显示有大有小不一致
现象原图不设置的情况: 屏幕快照 2016-12-18 下午2.25.17.png 设置radius为100的情况: 屏幕快照 2016-12-18 下午2.25.26.png 处理步骤 1.按需求 ...

HTML设置圆角头像,圆角头像的制作

HTML设置圆角头像,圆角头像的制作相关推荐

最新文章

热门文章