|
廢話(huà)少說(shuō)，言歸正傳。
基本原理：
我們都知道圖片是方方正正的，不可能做出圓角效果，那么我們?nèi)绾蝸?lái)做外圓透明的圖片呢？其實(shí)道理說(shuō)明了也就是一件很簡(jiǎn)單的事情，你看過(guò)下面的放大示意圖后可能就會(huì)“哦”地一聲，原來(lái)不過(guò)如此……
圖二
是的，看到這個(gè)效果圖你會(huì)一目了然，可是要想到這個(gè)方法，我卻浪費(fèi)了不少腦細(xì)胞。呵呵！
實(shí)現(xiàn)這種方法原理很簡(jiǎn)單：在每個(gè)b標(biāo)簽中各加載一次同樣的圖片，并結(jié)合背景定位background-position方式來(lái)達(dá)到效果。我們知道，同一張圖片加載多少次對(duì)于性能的影響并不大，因?yàn)檫@張圖片已經(jīng)被電腦緩存到本地，和用css sprites合并圖片一樣的道理。
但是需要注意的是：每個(gè)B標(biāo)簽加載圖片的定位是不一樣的。
背景圖片定位原理：
b1標(biāo)簽位于第一位，它主要用來(lái)描繪上邊框線(xiàn)，所以它不需要加載背景圖片。
b2標(biāo)簽位于第二位，它是第一個(gè)需要加載背景圖片的，但是不需要圖片負(fù)偏移，所以直接居左居頂定位就可以了。
.b2{background-position:left top;}
b3標(biāo)簽位于第三位，它需要加載背景圖片，讓它的背景圖片向上負(fù)偏移b2的高度值就可以，也就是1px。
.b3{background-position:left -1px;}
b4位于第四位，所以它向上負(fù)偏移b2+b3高度值的和，為2px.。
.b4{background-position:left -2px;}
H3標(biāo)簽位于第五位，所以它的背景圖片需要向上負(fù)偏移b2+b3+b4高度值的各，也就是4px；
h3{background-position:left -4px;}
這樣，b2、b3、b4、h3的圖片疊加起來(lái)和原始圖片上下漸變的效果完全重合，如同一張圖片，這樣就達(dá)到模擬圓角圖片的效果。
怎么樣，原理夠簡(jiǎn)單明了吧！
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) CSS圓角——透明圓角化背景圖片 [1] 下一頁(yè) CSS圓角——透明圓角化背景圖片 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) CSS圓角——透明圓角化背景圖片 [2]
