|
為滿足用戶的視覺追求及產(chǎn)品的背景圖片的換膚功能，設(shè)計(jì)師難免在設(shè)計(jì)上會(huì)用到半透明的效果。因此頁面重構(gòu)師基于視覺及產(chǎn)品的需要，采用了PNG32的半透明圖片還原設(shè)計(jì)稿。
但在IE6中遇到png兼容性，及其延伸的種種問題。如：
- png32的圖片上在IE6有兼容性問題，原本的透明顯示的背景將會(huì)失效。
- 在問題1的基礎(chǔ)上，針對(duì)IE6采用了CSS濾鏡讓其透明，但圖片不能應(yīng)用背景坐標(biāo)定位的方式只能單張使用，這做法不利于帶寬流量和請(qǐng)求鏈接數(shù)之余也不利樣式的管理
- 在問題2的基礎(chǔ)上，意味著要把png圖片單張切割，并單張應(yīng)用CSS濾鏡
針對(duì)以上問題重構(gòu)師的解決辦法如下：
把背景圖片如常的合并，利用相似于背景坐標(biāo)的方式調(diào)用局部圖片位置。最大區(qū)別在于分別定義了兩個(gè)無意義的標(biāo)簽。
- 一個(gè)標(biāo)簽作為模擬背景的載體標(biāo)簽：定義一個(gè)作為載體的標(biāo)簽，針對(duì)IE6以濾鏡的形式導(dǎo)入圖片，寬高與背景一致。
- 另一個(gè)標(biāo)簽作為截取背景局部位置的截取標(biāo)簽：定義此標(biāo)簽寬高與預(yù)想調(diào)用背景局部位置大小一致，并隱藏其溢出的部份。
- 最后計(jì)算出預(yù)想調(diào)用背景局部位置的坐標(biāo)，定義在載體標(biāo)簽中。
HTML結(jié)構(gòu)如下：
<div title="載體">
<div title=”截取”></div>
</div>
為了清晰的體現(xiàn)HTML結(jié)構(gòu)，給標(biāo)簽添加了title屬性，加以說明。本文實(shí)例：DEMO
實(shí)現(xiàn)步驟(分3步)：
1、載體標(biāo)簽：定義一個(gè)作為載體的標(biāo)簽，針對(duì)IE6以濾鏡的形式導(dǎo)入圖片，寬高與背景一致。(注意：濾鏡圖片路徑相對(duì)于頁面，而不是CSS的位置)
<div title="載體" style="width:440px;height:440px; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png');"></div>
出處：騰訊Webteam
責(zé)任編輯：bluehearts
上一頁 下一頁 IE6局部調(diào)用PNG32合并圖片 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 IE6局部調(diào)用PNG32合并圖片 [1]
第 2 頁 
