css教程:圆角头像制作

介绍两种制作圆角头像的方法,通过CSS与PNG透明图标来做的。

好多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代码:


<div id="circular-box" class="clearfix">

<ul>

<li><a href="http://www.sodao.com"><img src="jy20090504026.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>

<li><a href="http://www.sodao.com"><img src="jy20090504035.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>

<li><a href="http://www.sodao.com"><img src="jy20090504036.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>

</ul>

</div>

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}

这里需要注意的是:

  1. 使用 AlphaImageLoader 筛选器的元素必须有宽高,width:XXpx; height:XXpx;
  2. ie6下必须充值背景为none,_background:none

查看demo:http://www.css88.com/demo/circular-img/circular-img1.html

第二种:使用widgetfx的方法:

你可以在这里获取最新的widgetfx:http://code.google.com/p/widgetfx/source/browse/widgetfx.org/?r=122

html代码:


<div id="circular-box" class="clearfix">

<ul>

<li><a href="http://www.sodao.com"><img src="jy20090504026.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>

<li><a href="http://www.sodao.com"><img src="jy20090504035.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>

<li><a href="http://www.sodao.com"><img src="jy20090504036.jpg" width="200" height="200" /><span class="cir-bg"></span></a></li>

</ul>

</div>

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}

这里需要注意的是:

  1. 页面头部需要引用iepngfix_tilebg.js;
  2. 在透明图片的元素上加:behavior:url(”iepngfix.htc”);

查看demo:http://www.css88.com/demo/circular-img/circular-img.html

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索图片
, 圆角
, 透明
, 头像
, png
, 筛选器
Bootstrap圆角头像
,以便于您获取更多的相关知识。

时间: 2024-12-24 20:49:24

css教程:圆角头像制作的相关文章

美图秀秀画中画头像制作教程

给各位美图秀秀软件的使用者们来详细的解析分享一下画中画头像的制作教程. 教程分享:     画中画头像制作方法: 1.首先找张图,打开美图秀秀,裁剪一张头像出来(左上角是固定尺寸用的)   2.把裁好的头像保存好,接着点击一下背景虚化,把图片的虚化度数调一下.   3.点击拼图,添加图片,把刚才保存好的头像打开添加进来,因为以前曾经自定义过,所以电脑里会直接默认为自定义.   4.记得调整的时候上面那张差不多10度左右就可以了,然后这张图要稍稍偏下一些,因为等一下要放小夹子.   5.调好角度之

天天P图如何制作你的名字动漫头像?天天P图你的名字动漫头像制作教程

动漫电影<你的名字>正在陆续上映,这款动漫随之带动了周边商品的发展,例如你的名字同款滤镜,现在天天P图又推出了一种新的功能,让你可以穿越成为漫画主角,制作你的名字动漫头像,那要怎么制作你的名字动漫头像呢?下面来跟脚本之家的小编一起看看你的名字动漫头像制作方法吧! 你的名字动漫头像怎么制作? 首先打开天天p图,看到最上方的变身漫画主角,点击立即使用, 进入制作页面,点击:立即穿越, 上传正脸照片,就可以啦! 手动选择男孩子或者女孩子, 最后你的二次元头像就出来啦! 以上就是小编带来的你的名字动漫

CSS高级技巧:圆角矩形

所谓的CSS高级技巧...其实是一些对基本技巧的创意组合, 任何手段和技巧都是解决问题的方法. 只要学会这种思考问题的方法, 你也能拥有属于自己的CSS秘籍. CSS2 还没有办法创造出曲线边框, 明显的, 仅仅方框是没办法满足我们设计师的. 所以CSS圆角技术到现在还是那么的火. 1. 固定宽度的纯色圆角矩形 .Com 在众多圆角技术中, 固定宽度的圆角矩形应该是最容易实现的, 只需要2个图片以及一段简单的html代码. html代码如下: .Com <div class="wrappe

CSS3实例教程代码:简单制作遨游浏览器LOGO

文章简介:CSS3实例教程代码:简单制作遨游浏览器LOGO. <!DOCTYPE HTML> <html> <head> <title>LOGO</title> <style type="text/css"> * {margin:0; padding:0} .main {width:800px; margin:50px auto 0}  .main_wrapper {width:240px; height:240p

CSS实现分页效果制作实例

CSS实现分页效果制作实例,教程和代码如下:  这个教程要说明的是如何为搜索结果或更长记录列表设计分页.因为经常有人问我这个问题,所以我决定发一个帖子来说明如何用少量的 HTML 和 CSS 代码设计出完美的分页样式. 这个教程也包含有实现Flickr.Digg式的简洁分页样式的HTML/CSS代码,随时可以应用于你的WEB项目中. Update as March 17, 2008: My friends Simone Saveri solved some issuse with IE6 and

经典实用CSS教程详细讲解

css|教程 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具之一.使用CSS能够简化网页的格式代码,加快下载显示的速度,也减少了需要上传的代码数量,大大减少了重复劳动的工作量.尤其是当你面对的是有数百个网页的站点时,CSS简直象是神对我们的恩赐! 前言 CSS(Cascading Stylesheets,层叠样式表)是一种制作网页的新技术,现在已经为大多数的浏览器所支持,成为网页设计必不可少的工具

只有一点html和css基础,如何制作一个织梦的首页模板?用dw可以吗?具体怎么做呢

问题描述 只有一点html和css基础,如何制作一个织梦的首页模板?用dw可以吗?具体怎么做呢 只有一点html和css基础,如何制作一个织梦的首页模板?用dw可以吗?具体怎么做呢 解决方案 如果懂的不多说实话,制作网页是有一定困难的,而且dw自动生成的代码可读性都很差,前端基础不牢靠的话生成的代码很难进行修改的 解决方案二: 可以用Dreamweaver制作网页的,下个软件安装,找个教程看看就可以了.

CSS3教程收集分享:具有动画过渡效果的CSS教程

文章简介:CSS3教程收集分享:具有动画过渡效果的CSS教程. 今天我们分享出了18个优秀的具有动画过渡效果的CSS3详细教程.CSS3让一切变得更加容易和高效,它改变了很多旧的WEB开发技术,在目前网络高速发展的当下,更好的为网页设计师来做后期的维护提供的便利.随着这一过渡效果的使用,让更多的设计变得高效起来.让网页也变得更具艺术过渡的 气质.下面这18个例子可以让你得到更多的灵感.也会让你的交互创意灵感变得更加有意思起来. 创建一个下拉菜单,使用CSS3转换 (演示 下载) 动画Popove

网页代码讲解:CSS实现圆角

文章简介:用DIV+CSS实现圆角. 用DIV+CSS实现圆角. <style> div.bg{color:#fff;font-size:18px;font-weight:700;background:#ff3300;width:50%} b{display:block;} /*将所有b标签转成块级元素*/  div b.topb b,div b.bottomb b{height:1px;overflow:hidden;background:#ff3300;} /*div标签内类名为topb/