背景圖片的定位

1.背景定位主要通過background-position屬性來(lái)設(shè)置.屬性說(shuō)明如下：

2.需要注意的是background-postion通過length來(lái)設(shè)置的話，坐標(biāo)原點(diǎn)在圖像的左上角。
而通過percent來(lái)設(shè)置的話，其實(shí)是將圖片上相應(yīng)百分比的點(diǎn)與父類元素上相應(yīng)百分比位置的點(diǎn)重合得到的結(jié)果。
所以當(dāng)設(shè)置成50%時(shí)會(huì)出現(xiàn)居中顯示的現(xiàn)象。

3.要避免出現(xiàn)length和percent方式混合設(shè)置的情況，這將使瀏覽器抓狂，不知道能干出點(diǎn)什么來(lái)。

具體示例可以參考，這里。 示例下載

圓角框

1.固定寬度圓角框
思路：基本上通過兩個(gè)裁剪好的圓角圖片(頂部一個(gè)，底部一個(gè))分別設(shè)置為相應(yīng)塊元素的背景。
限制:a.圓角框的寬度有圓角圖片的大小所限制.
b.內(nèi)層塊與外層快之間不能存在間隔。即外層塊不能設(shè)置padding，內(nèi)層塊不能設(shè)置margin 和 border。
c.圓角圖片的背景顏色是預(yù)先設(shè)置好的，修改框樣式時(shí)需要替換圖片。
具體實(shí)現(xiàn)：
方式a:重復(fù)背景顏色
方式b:重復(fù)背景圖片
具體示例可以參考，這里。 示例下載

2.不固定寬度圓角框:滑動(dòng)門技術(shù)<sliding doors technique>
思路：基本上與上面的思路一致，不過圓角圖片被進(jìn)一步的細(xì)分。將上面的圖片拆分成了左上，右上，左下，右下四個(gè)圖片，
這樣的話用來(lái)定位圖片的塊元素也要相應(yīng)的增加。簡(jiǎn)單來(lái)說(shuō)4個(gè)圖片需要4層塊元素來(lái)定位。
限制:a.圓角框的寬度有圓角圖片的大小所限制.但是這里的限制出現(xiàn)了一點(diǎn)點(diǎn)變化
即圓角框的寬度可以在小于左上+右上寬度的和的范圍內(nèi)變動(dòng)；圓角框的高度可以在小于左上+左下高度的和的范圍內(nèi)變動(dòng)。
b.定義背景圖片的任意兩層之間不能存在間隔。即外層塊不能設(shè)置padding，內(nèi)層塊不能設(shè)置margin 和 border。
c.圓角圖片的背景顏色是預(yù)先設(shè)置好的，修改框樣式時(shí)需要替換圖片。
d.還有個(gè)限制就是為了實(shí)現(xiàn)滑動(dòng)門技術(shù)，人為的添加了多層無(wú)實(shí)際語(yǔ)義的塊元素，這是的代碼的可維護(hù)性變差了。
具體示例可以參考，這里。 示例下載

3.如果在擴(kuò)展一下：將圖片拆分成9個(gè)圖片，即左上，上中，右上，左中，中部，右中，左下，下中，右下 （圖片井字形拆分）。
這樣可以利用圖片的重復(fù)來(lái)實(shí)現(xiàn)寬度和高度自由的圓角框了。
限制：基本上同上面一樣，寬度高度的限制不存在了。
但是為了定位這些背景圖片所添加的多個(gè)無(wú)語(yǔ)義塊元素不是人人都能接受的，或者說(shuō)是很難有人接受的。
如何實(shí)現(xiàn)大小自由的圓角框呢？
http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/

具體示例可以參考，這里。 示例下載

山頂角框(mountaintop corner)

思路:圓角框的實(shí)現(xiàn)思路和上是一樣的，區(qū)別在于上面的實(shí)現(xiàn)中角圖片的背景是確定的，而山頂角框中利用利用位圖蒙版來(lái)替代角圖片，將實(shí)際上位圖蒙版中角圖像的位置留留成透明的，這樣的的該蒙版的透明部分的顏色將顯示為所在塊的背景顏色，這樣就實(shí)現(xiàn)了角圖片顏色可以通過設(shè)置背景顏色來(lái)更改的目的。

具體示例可以參考，這里。 示例下載

陰影

1.簡(jiǎn)單陰影
思路：基本上就是將背景圖片放置到圖片的下面，通過適當(dāng)?shù)奈灰苼?lái)在某個(gè)角落上面顯示出背景圖片，從而達(dá)到顯示陰影的效果。
實(shí)現(xiàn)方式：可以通過對(duì)背景圖片margin賦予負(fù)值來(lái)偏移背景圖片,這種做法形成的陰影稱為簡(jiǎn)單陰影；另一種做法就是通過將圖片與背景圖片的相對(duì)位置來(lái)相對(duì)定位來(lái)達(dá)到形成陰影的效果，這種做法稱為Clagnut方法。
限制：圖片的長(zhǎng)寬應(yīng)該要小于陰影圖片的長(zhǎng)寬這樣形成的陰影看起來(lái)會(huì)比較完整，當(dāng)然如果背景圖片做過特殊的處理的話那就另當(dāng)別論了。

2.模糊陰影
思路：上面形成的陰影被指邊緣缺乏過渡，所以才有了模糊陰影的方法的出現(xiàn)。主要思路就是利用一個(gè)具有alpha透明度的PNG來(lái)蓋住陰影圖象的邊緣。
實(shí)現(xiàn)方式：為了實(shí)現(xiàn)這個(gè)PNG圖片的覆蓋，自然需要添加另外一個(gè)塊元素用來(lái)定位這個(gè)圖片。
具體實(shí)現(xiàn)可以看這里。<為了兼容IE的各個(gè)版本，可是費(fèi)了腦筋的>
注意在實(shí)現(xiàn)模糊陰影時(shí)利用了alpha透明度的PNG圖片，對(duì)于這個(gè)IE的支持可不好，好在又不少方法可以解決：
1.利用過濾器：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(scr='shadow.png',sizingMethod='crop');
2.利用條件注釋來(lái)屏蔽可能造成的不良影響：
<!--[if gte ie 5.500]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->

3.洋蔥皮陰影
思路：為了彌補(bǔ)陰影邊緣缺乏過渡的情況，采用類似于山頂角的實(shí)現(xiàn)。創(chuàng)建兩國(guó)陰影尾部Gif,用它們覆蓋在主陰影圖像的末尾上。
實(shí)現(xiàn)方式：為了定位這兩個(gè)背景圖片，需要給定義兩個(gè)鉤子。即定義兩國(guó)無(wú)語(yǔ)意的塊元素來(lái)放置這兩個(gè)gif。
具體實(shí)現(xiàn)看這里。
限制：添加了多個(gè)無(wú)語(yǔ)意塊元素，破壞了樣式表的可維護(hù)性。

具體示例可以參考，這里。 示例下載

圖片替代

所謂的圖片替代就是利用背景圖片替換文檔中的文本，不是去除文本，而是利用CSS隱藏文本。
實(shí)現(xiàn)方式：
1.FIR(Fahrner Image Replacement):文本形成的塊隱藏起來(lái)
2.Phark：文本偏移
3.Gilder/Levin：利用圖片定位到文本上面將文本遮蔽起來(lái)。
4.IFR(Innman Flash Replacement)與sIFR(可伸縮Inman Flash Replacement)
要實(shí)現(xiàn)sIFR可以利用sifr腳本來(lái)處理，具體可以看這里:http://www.mikeindustries.com/sifr

具體示例可以參考，這里。 示例下載