把背景圖片如常的合并，利用相似于背景坐標(biāo)的方式調(diào)用局部圖片位置 。最大區(qū)別在于分別定義了兩個(gè)無意義的標(biāo)簽 。
為滿足用戶的視覺追求及產(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í)現(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=https://www.rkxy.com.cn/dnjc/’bg.png’);/div
推薦閱讀
- IE6/IE7下絕對(duì)定位position:absolute和margin的沖突問題解決
- IE 6不支持min-height或max-width等屬性的完美解決方案
- 寫CSS樣式做瀏覽器兼容時(shí)區(qū)別ie8和ie9的方法
- IE6、IE7、IE8、Firefox兼容性CSS HACK代碼及示例
- css div實(shí)現(xiàn)的遮罩層完美兼容IE6-IE9 FireFox
- overflow:hidden 解決IE6,IE7不能隱藏絕對(duì)定位溢出的內(nèi)容
- html 滾動(dòng)條在IE6和IE7中兼容性問題
- WIN7操作系統(tǒng)下做好IE6,IE7的兼容性測(cè)試
- 陰影 IE下模擬css3中的box-shadow效果代碼
- IE6,IE7瀏覽器下 margin 無效的解決方法