|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
网页制造poluoluo文章简介:今朝很多网站的团体头像都接纳圆角矩形来表现,这类效果就是经由过程CSS与PNG通明图标来做的,上面为您先容两种制造圆角矩形头像的办法.
今朝很多网站的团体头像都接纳圆角矩形来表现,这类效果就是经由过程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代码:- <divid="circular-box"class="clearfix"><ul><li><ahref="http://www.sodao.com"></span></a></li><li><ahref="http://www.sodao.com"><ul><li><ahref="http://www.sodao.com"></span></a></li><li><ahref="http://www.sodao.com"><imgsrc="jy20090504036.jpg"width="200"height="200"/><spanclass="cir-bg"></span></a></li></ul></div>
复制代码 CSS代码:- #circular-box{margin:50px;}#circular-boxli{float:left;margin:020px;position:relative}#circular-boxliimg{display:block}#circular-boxlispan{position:absolute;top:0;left:0;width:200px;height:200px;background:url(circular.png)no-repeat;behavior:url("iepngfix.htc");cursor:pointer}
复制代码 这里必要注重的是:
- 页面头部必要援用iepngfix_tilebg.js;
- 在通明图片的元素上加:behavior:url(”iepngfix.htc”);
检察demo:http://www.css88.com/demo/circular-img/circular-img.html
另:校内最新的该效果制造有的出格,在撑持html5的扫瞄器上利用了Canvas,IE下是用VML,HTML5绘图基础上都靠canvas,并且必要js的撑持。相干信息能够检察http://byzuo.com/blog/html5-canvas
你用什么用的熟练就用什么,讲究的是效率,客户永远不管你用什么,页面就要好看,功能就要好用,还有时间和成本的问题。 |
|