背景圖片的定位
1.背景定位主要通過background-position屬性來設置.屬性說明如下：
| Syntax HTML { background-position : sPosition }
Scripting object.style.backgroundPosition [ = sPosition ] Possible Values sPosition String that specifies or receives one or two of the following values. length Floating-point number, followed by an absolute units designator (cm, mm, in, pt, pc, or px) or a relative units designator (em or ex). For more information about the supported length units, see CSS Length Units Reference.
percentage Integer, followed by a percent sign (%). The value is a percentage of the width or height of the object.
vAlignment Vertical alignment value. Possible values include the following:
top Vertical alignment is at the top.
center Vertical alignment is centered.
bottom Vertical alignment is at the bottom.
hAlignment Horizontal alignment value. Possible values include the following:
left Horizontal alignment is to the left.
center Horizontal alignment is centered.
right Horizontal alignment is to the right. |
2.需要注意的是background-postion通過length來設置的話，坐標原點在圖像的左上角。
而通過percent來設置的話，其實是將圖片上相應百分比的點與父類元素上相應百分比位置的點重合得到的結果。
所以當設置成50%時會出現居中顯示的現象。
3.要避免出現length和percent方式混合設置的情況，這將使瀏覽器抓狂，不知道能干出點什么來。
具體示例可以參考，這里。 示例下載
圓角框
1.固定寬度圓角框
思路：基本上通過兩個裁剪好的圓角圖片(頂部一個，底部一個)分別設置為相應塊元素的背景。
限制:a.圓角框的寬度有圓角圖片的大小所限制.
b.內層塊與外層快之間不能存在間隔。即外層塊不能設置padding，內層塊不能設置margin 和 border。
c.圓角圖片的背景顏色是預先設置好的，修改框樣式時需要替換圖片。
具體實現：
方式a:重復背景顏色
方式b:重復背景圖片
具體示例可以參考，這里。 示例下載
2.不固定寬度圓角框:滑動門技術<sliding doors technique>
思路：基本上與上面的思路一致，不過圓角圖片被進一步的細分。將上面的圖片拆分成了左上，右上，左下，右下四個圖片，
這樣的話用來定位圖片的塊元素也要相應的增加。簡單來說4個圖片需要4層塊元素來定位。
限制:a.圓角框的寬度有圓角圖片的大小所限制.但是這里的限制出現了一點點變化
即圓角框的寬度可以在小于左上+右上寬度的和的范圍內變動；圓角框的高度可以在小于左上+左下高度的和的范圍內變動。
b.定義背景圖片的任意兩層之間不能存在間隔。即外層塊不能設置padding，內層塊不能設置margin 和 border。
c.圓角圖片的背景顏色是預先設置好的，修改框樣式時需要替換圖片。
d.還有個限制就是為了實現滑動門技術，人為的添加了多層無實際語義的塊元素，這是的代碼的可維護性變差了。
具體示例可以參考，這里。 示例下載
3.如果在擴展一下：將圖片拆分成9個圖片，即左上，上中，右上，左中，中部，右中，左下，下中，右下 （圖片井字形拆分）。
這樣可以利用圖片的重復來實現寬度和高度自由的圓角框了。
限制：基本上同上面一樣，寬度高度的限制不存在了。
但是為了定位這些背景圖片所添加的多個無語義塊元素不是人人都能接受的，或者說是很難有人接受的。
如何實現大小自由的圓角框呢？
http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/
具體示例可以參考，這里。 示例下載
山頂角框(mountaintop corner)
思路:圓角框的實現思路和上是一樣的，區別在于上面的實現中角圖片的背景是確定的，而山頂角框中利用利用位圖蒙版來替代角圖片，將實際上位圖蒙版中角圖像的位置留留成透明的，這樣的的該蒙版的透明部分的顏色將顯示為所在塊的背景顏色，這樣就實現了角圖片顏色可以通過設置背景顏色來更改的目的。
具體示例可以參考，這里。 示例下載
陰影
1.簡單陰影
思路：基本上就是將背景圖片放置到圖片的下面，通過適當的位移來在某個角落上面顯示出背景圖片，從而達到顯示陰影的效果。
實現方式：可以通過對背景圖片margin賦予負值來偏移背景圖片,這種做法形成的陰影稱為簡單陰影；另一種做法就是通過將圖片與背景圖片的相對位置來相對定位來達到形成陰影的效果，這種做法稱為Clagnut方法。
限制：圖片的長寬應該要小于陰影圖片的長寬這樣形成的陰影看起來會比較完整，當然如果背景圖片做過特殊的處理的話那就另當別論了。
2.模糊陰影
思路：上面形成的陰影被指邊緣缺乏過渡，所以才有了模糊陰影的方法的出現。主要思路就是利用一個具有alpha透明度的PNG來蓋住陰影圖象的邊緣。
實現方式：為了實現這個PNG圖片的覆蓋，自然需要添加另外一個塊元素用來定位這個圖片。
具體實現可以看這里。<為了兼容IE的各個版本，可是費了腦筋的>
注意在實現模糊陰影時利用了alpha透明度的PNG圖片，對于這個IE的支持可不好，好在又不少方法可以解決：
1.利用過濾器：filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(scr='shadow.png',sizingMethod='crop');
2.利用條件注釋來屏蔽可能造成的不良影響：
<!--[if gte ie 5.500]>
<link rel="stylesheet" type="text/css" href="ie55.css" />
<![endif]-->
3.洋蔥皮陰影
思路：為了彌補陰影邊緣缺乏過渡的情況，采用類似于山頂角的實現。創建兩國陰影尾部Gif,用它們覆蓋在主陰影圖像的末尾上。
實現方式：為了定位這兩個背景圖片，需要給定義兩個鉤子。即定義兩國無語意的塊元素來放置這兩個gif。
具體實現看這里。
限制：添加了多個無語意塊元素，破壞了樣式表的可維護性。
具體示例可以參考，這里。 示例下載
圖片替代
所謂的圖片替代就是利用背景圖片替換文檔中的文本，不是去除文本，而是利用CSS隱藏文本。
實現方式：
1.FIR(Fahrner Image Replacement):文本形成的塊隱藏起來
2.Phark：文本偏移
3.Gilder/Levin：利用圖片定位到文本上面將文本遮蔽起來。
4.IFR(Innman Flash Replacement)與sIFR(可伸縮Inman Flash Replacement)
要實現sIFR可以利用sifr腳本來處理，具體可以看這里:http://www.mikeindustries.com/sifr
具體示例可以參考，這里。 示例下載
平凡而簡單的人一個，無權無勢也無牽無掛。一路廝殺，只進不退，死而后已，豈不爽哉！
收起對“車”日行千里的羨慕；收起對“馬”左右逢緣的感嘆；目標記在心里面，向前進。一次一步，一步一腳印，跬步千里。
這個角色很適合現在的我。
posted on 2007-12-25 10:32
過河卒 閱讀(1223)
評論(0) 編輯 收藏 所屬分類:
W3C/Css/Html