日本免费全黄少妇一区二区三区-高清无码一区二区三区四区-欧美中文字幕日韩在线观看-国产福利诱惑在线网站-国产中文字幕一区在线-亚洲欧美精品日韩一区-久久国产精品国产精品国产-国产精久久久久久一区二区三区-欧美亚洲国产精品久久久久

  1. 首頁 > 云知道 > >

使用Filters濾鏡彌補CSS3的跨瀏覽器問題以及兼容低版本IE( 三 )

云知道




!Doctype html html head meta charset="UTF-8" / titleie半透明層/title style type="text/css" body{background:#fee;} .Box{ position:relative;width:300px;height:200px;border:1px solid #ccc; } .ieAlpha{ position:absolute;z-index:-1;top:0;left:0;width:300px;height:200px;background:#333; filter:alpha(opacity=30); } /style /head body div class=’Box’ div class=’ieAlpha’/div 透明背景 /div /body /html
ffcod = delpost.runcode29 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode29 .value = https://www.rkxy.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運行
這種方法使用的比較普遍，但是多加的一層實在有些多余，并且有時候控制起來還比較麻煩 。
我們可以換一個濾鏡方法：在上面的漸變的濾鏡里，我們提到了漸變色也可以使用alpha半透明值，并且這個漸變?yōu)V鏡是針對于元素背景的，元素內(nèi)容并不會受其影響 。
那么我們可以這樣實現(xiàn)：


!Doctype html html head meta charset="UTF-8" / title利用gradient實現(xiàn)半透明層/title style type="text/css" body{background:#fee;} .Box{ position:relative;width:300px;height:200px;border:1px solid #ccc; filter:progid:DXImageTransform.Microsoft.gradient(gradientType = 1,startColorstr = #66000000,endColorstr = #66000000); } /style /head body div class=’Box’ 透明背景 /div /body /html
ffcod = delpost.runcode30 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode30 .value = https://www.rkxy.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運行
顯然結(jié)構(gòu)，樣式簡單多了，再做一下其他瀏覽器的兼容性:


!Doctype html html head meta charset="UTF-8" / title半透明層/title style type="text/css" body{background:#fee;} .Box{ position:relative;width:300px;height:200px;border:1px solid #ccc; background:rgba(0,0,0,0.35); /* 這里也不獨立使用opacity了 */ filter:progid:DXImageTransform.Microsoft.gradient(gradientType = 1,startColorstr = #66000000,endColorstr = #66000000); } /style /head body div class=’Box’ 透明背景 /div /body /html
ffcod = delpost.runcode31 .value; ffcod = ffcod.replace(/
/g,’’); delpost.runcode31 .value = https://www.rkxy.com.cn/dnjc/ffcod; 提示：您可以先修改部分代碼再運行
雖然我們以上解決了四種ie低版本下的不足，但在解決的過程中某些地方還是稍顯繁復(fù)了，且在具體應(yīng)用當(dāng)中的情況或許并沒有這么簡單，讀者當(dāng)理解之后再做延伸 。
除了以上四種問題被解決之外，還是有太多的css3效果在ie低版本下是無法實現(xiàn)的，我們不得不(在低版本瀏覽器中)放棄之，其中最最最遺憾的就是css3圓角效果了，當(dāng)然使用VML也是能解決，封裝的方法:Curved corner，同DD_belatedPNG一樣，我還是建議讀者謹(jǐn)慎采用 。
ie各個Filters靜態(tài)濾鏡演示Demo：DXTidemo

推薦閱讀