DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS教程:制作圓角矩形的網站頭像
CSS教程:制作圓角矩形的網站頭像
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:目前許多網站的個人頭像都采用圓角矩形來體現,這種效果就是通過CSS與PNG透明圖標來做的,下面為您介紹兩種制作圓角矩形頭像的方法.

目前許多網站的個人頭像都采用圓角矩形來體現,這種效果就是通過CSS與PNG透明圖標來做的,下面為您介紹兩種制作圓角矩形頭像的方法:

好多sns的頭像都使用圓角了,昨天在校內上看到了圓角頭像,今天在Qzone的也看到了圓角頭像,圓角頭像看上去比直角的美觀。

2009-08-19_1731512009-08-20_122313

圓角頭像的制作原理就是在頭像上覆蓋一張透明的圖片,把四個角顏色設置成頁面的背景顏色,中間透明,

假設我的頁面底色是純黑色的,那麼這個透明圖片可以做成這樣,如圖:

2009-08-20_123344

這裡需要注意的是需要把圖片保存成24位的png,雖然IE6支持8位的png的透明,但是8位的png做透明圓弧圖片存在效果上的問題,就是存在白色的雜邊或鋸齒,如圖:

2009-08-20_124016

,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

另:校內最新的該效果制作有的特別,在支持html5的浏覽器上使用了Canvas,IE下是用VML,HTML 5畫圖基本上都靠canvas,而且需要js的支持。相關信息可以查看http://byzuo.com/blog/html5-canvas

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved