給網頁添加背景映像總結

標籤：ssr   嵌入   部分   gnu   鋸齒   radius   引擎   splay   ack   

1.固定寬度和可變寬度的圓角框

方法一：適用於新型瀏覽器，直接用border-radius屬性

方法二：適用於舊版瀏覽器，IE6等

對於固定寬度圓角框，需要有兩個映像，一個映像用於框的頂部，一個用於框的底部。

對於可變寬度圓角框，需用到滑動門技術（隨著框尺寸的增加，大映像有更多的部分顯露出來，這樣就實現了框擴充的效果），這個方法需用到四個映像（top-left,top-right,bottom-left,bottom-right）,bottom-left應用於主框div，bottom-right應用於外面的div，top-left應用於內側的div，top-right應用於標題

對於可變寬度山頂角，建立曲線形的位元影像角蒙板，蓋住正使用的背景顏色，就形成了曲線形框的效果，對於小曲線效果較好，但對於大麴線，會出現鋸齒。和可變寬度圓角框一樣，需要4個元素來應用4個角蒙板。

方法三：使用多個背景映像，用的方法也是四個背景映像，優點是可省去無用標記，Firefox和Opera的最新版本支援這個屬性，IE不支援。

方法四：使用css3新特性boreder-image，這個屬性允許指定一個映像作為元素的邊框，映像被分成9部分，這9部分怎麼分，要依據border-image設定，有3種方式，PX，百分數。其他詳見border-image屬性介紹（http://www.w3school.com.cn/cssref/pr_border-image.asp）

2.投影

方法一：適用於新型瀏覽器，直接用box-shadow屬性（http://www.w3school.com.cn/cssref/pr_box-shadow.asp）

方法二：適用於所有瀏覽器，實現方法為，首先將一個大的投影映像應用於容器div的背景，然後使用負的外邊距便宜這個映像

方法三：來自Clagnut的投影方法，不使用負的外邊距位移映像，而是使用相對定位來位移映像。

3.不透明度

方法一：使用filter屬性（http://www.runoob.com/cssref/css3-pr-filter.html）

方法二：background-color：用rgba設定

PNG透明度

a.PNG檔案格式最大的優點之一是它支援alpha透明度，第一個規則使用專有的過濾器載入PNG並應用alpha透明度，原來的背景映像仍然會顯示，所以第二個規則是隱藏原來的背景映像。

b.使用IE PNG fix技術，需使用專有css擴充-行為（behavior）

4.CSS視差效果

視差滾動，實現方法是建立幾個不同的背景映像，每個背景映像有不同的位置。

5.映像替換

使用文本映像時，不願意將其直接嵌入頁面中，就有了映像替換。映像替換，是先像平常一樣添加文本，然後使用css隱藏文本並在它的位置上顯示背景映像。這樣，搜尋引擎依然可以搜尋HTML文本，如果禁用css，文本也會顯示。

實現方法

a.FIR，最早最流行的，把要替換的文本放在span標籤內，然後將替換映像作為背景映像應用於標題元素，並將span的display值設為none。缺點是，許多螢幕閱器會自動忽略display值為none或visibility值為hidden的元素，因此會完全忽略這個文本。

b.Phark，對標題進行非常大的負值文本縮排，缺點是在關閉映像但是開啟css時文本也不會顯示。

c.sIFR,用flash檔案代替文本

 

給網頁添加背景映像總結