部分透明的蒙版效果實(shí)現(xiàn)思路(兼容ie6)
發(fā)布時(shí)間：2013-08-13 15:13:13 作者：佚名 
我要評(píng)論
我要評(píng)論與普通的蒙版效果不一樣，需要有一個(gè)空白的地方顯示頁(yè)面上原有的動(dòng)態(tài)內(nèi)容，具體的實(shí)現(xiàn)思路如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助
先看下要實(shí)現(xiàn)的效果圖片
png24位的圖片如下
與普通的蒙版效果不一樣，需要有一個(gè)空白的地方顯示頁(yè)面上原有的動(dòng)態(tài)內(nèi)容；
實(shí)現(xiàn)思路如下：1:要支持圖的半透明效果，需要采用png24格式（png8不支持半透明效果，保存后會(huì)變成底色位黑色的圖片）
為兼容ie6需要加hack：
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='圖片的路徑',sizingMethod='crop');
2:建立蒙版，此蒙版只要罩住除圖片以外的部分即可，圖片所在的區(qū)域不能擋住
那么如何實(shí)現(xiàn)第二部？a：建立一個(gè)背景色為透明的div用來(lái)存儲(chǔ)照片所在的部分，div的寬度和高度就等于圖片的寬度和高度；
b：蒙版部分通過(guò)div的border進(jìn)行設(shè)置，border的顏色為黑色，透明度為50，那么border的四個(gè)width如何設(shè)置？
＊border－left－width：圖片的left位置
?。猙order－right－width：屏幕寬度－圖片的left位置－圖片的寬度
?。猙order－top－width：圖片的top位置
?。猙order－bottom－width：頁(yè)面高度－圖片的top位置－圖片的高度
png24位的圖片如下
與普通的蒙版效果不一樣，需要有一個(gè)空白的地方顯示頁(yè)面上原有的動(dòng)態(tài)內(nèi)容；
實(shí)現(xiàn)思路如下：1:要支持圖的半透明效果，需要采用png24格式（png8不支持半透明效果，保存后會(huì)變成底色位黑色的圖片）
為兼容ie6需要加hack：
_background:0;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='圖片的路徑',sizingMethod='crop');
2:建立蒙版，此蒙版只要罩住除圖片以外的部分即可，圖片所在的區(qū)域不能擋住
那么如何實(shí)現(xiàn)第二部？a：建立一個(gè)背景色為透明的div用來(lái)存儲(chǔ)照片所在的部分，div的寬度和高度就等于圖片的寬度和高度；
b：蒙版部分通過(guò)div的border進(jìn)行設(shè)置，border的顏色為黑色，透明度為50，那么border的四個(gè)width如何設(shè)置？
＊border－left－width：圖片的left位置
?。猙order－right－width：屏幕寬度－圖片的left位置－圖片的寬度
?。猙order－top－width：圖片的top位置
?。猙order－bottom－width：頁(yè)面高度－圖片的top位置－圖片的高度
相關(guān)文章
純CSS實(shí)現(xiàn)背景半透明文字不透明效果兼容IE6
在某些情況下可能會(huì)需要背景半透明文字不透明這樣的效果，實(shí)現(xiàn)起來(lái)并不復(fù)雜，通過(guò)濾鏡便可做到，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-05- 圖片透明在某些特殊的情況下還是比較實(shí)用的，下面是用濾鏡寫(xiě)的圖片透明代碼，感興趣的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-04
背景透明文字不透明的最佳方法兼容IE(以背景黑色透明度0.5為例)
本文以背景黑色，透明度0.5舉例為大家詳細(xì)介紹下關(guān)于背景透明，文字不透明的最佳方法同時(shí)兼容IE，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下哈希望對(duì)大家有所幫助2013-07-03使用濾鏡解決IE6下png圖片不能透明(被渲染成默認(rèn)色)的問(wèn)題
IE6不支持透明，所有的透明部分，都被渲染成灰色或白色（不知道啥顏色，他自己的默認(rèn)色）。這樣看起來(lái)難看不說(shuō)，圓角的功能蕩然無(wú)存，下面與大家分享下使用濾鏡解決此問(wèn)題2013-06-20格式png24透明底 多種解決png24格式圖片在ie6中透明問(wèn)題
圖片透明，鋸齒問(wèn)題是重構(gòu)人員很頭疼的問(wèn)題，png24可以解決這些鋸齒問(wèn)題，但是ie6不支持png24透明，不過(guò)利用ie6的hack問(wèn)題有兩種解決的辦法，感興趣的朋友可以了解下哈2013-05-24- 想不想要自己的主頁(yè)鏈接很炫呢，背景半透明的鏈接效果，空鏈接實(shí)現(xiàn)的鏈接效果，只需要定義一個(gè)特效式的CSS樣式即可以實(shí)現(xiàn)，在需要實(shí)現(xiàn)的地方應(yīng)用定義的CSS樣式，也可以全站2013-02-27
img 半透明 處理img加半透明背景實(shí)現(xiàn)思路及代碼
img加半透明背景實(shí)現(xiàn)原理：給li加上背景,li的大小就是圖片的大小,在a:hover時(shí)候改變a的透明度,感興趣的朋友可以了解下，希望本文可以幫助到你2013-01-13- 曾經(jīng)一度的采用濾鏡的方法搞定這個(gè)問(wèn)題，弊端是當(dāng)有多個(gè)png圖片的時(shí)候，這就造成了css的壓力，得寫(xiě)多少css代碼呀，也嘗試過(guò)js，缺點(diǎn)是不支持CSS中backgrond-position與back2013-09-11