關於css的幾點

花了兩個星期，我看完了《精通css：高階web標準解決方案（第2版）》，看完了這本書我學到了很多。

1、是關於背景定位的：

使用畫素設定背景定位和使用百分數進行背景定位是不一樣的，如果使用畫素設定背景定位，那麼影象左上角到元素左上角的距離為指定的畫素值。而百分數定位並不對背景影象的左上角進行定位，而是使用影象的乙個對應點。如下圖：

2、在ie6下的透明度的解決方法：

ie6不直接支援png透明度，對此有兩種解決方法：

(1)、在ie6中支援png透明的方法時使用專有的alphaimageloader過濾器。為此，需要在css中包含以下**行。

filter:progid:dximagetransform.microsoft.alphaimageloader(src='/img/my-image.png',sizingmethod='crop');但是這行**會導致css無效，所以最好把它放在ie6專有的樣式表中。例：

（注：現在網上也有專門解決ie6透明度的js檔案，需要可以上網查詢）

3、css視差效果

要想實現這種效果，首先需要建立幾個不同的背景影象。乙個影象是綠色背景上的藤蔓，另兩個影象時alpha透明背景上的藤蔓。這樣中景和前景影象可以相互覆蓋並蓋在背景上，同時不會把檢視弄得模糊。做法如下：

html結構：

your content will go here!

首先，需要在body元素上新增主背景。若希望這個影象水平平鋪，就需要把image-repeat屬性設定repeat-x。還需要讓body元素顯示背景顏色。最後，把影象相對於視窗大小水平偏移20%，這是關鍵之處。當水平調整視窗大小時，背景影象的位置會改變，看起來像是移動了。

body

現在需要對中景和前景影象做同樣的處理，但是選擇比較高的百分數，讓他們相對移動得更快，產生有深度的感覺。我們把中景的位置設定為40%，把前景位置設定為150%。也可以自己調整位置，得到自己想要的效果。

body

.midground

.foreground

4、影象替換

影象替換有兩種方法：

(1)、例如：

然後將替換影象作為背景影象應用於標題元素：

h2並且將span的display值設定為none，從而隱藏span的內容：

span

這個方法似乎很有效，但是最後乙個規則會造成問題。許多流行的螢幕閱讀器會忽略那些display值為none或visibility為hidden的元素。因此會完全忽略這個文字，造成嚴重的可訪問性問題。

(2)、例如：

這個方法不使用display屬性來隱藏文字，而是對標題進行非常大的負值文字縮排：

h2這個方法效果很好，解決了螢幕閱讀器的問題，但是，這個方法在關閉影象但是開啟css的情況下是無效的。

5、在ie下啟用背景快取的方法：

**如下：

html