715
技術社區[雲棲]
PIE使用陰影後的背景透明方法
使用PIE後，會發現如果有設置 box-shadow 時，當前 class 樣式中設置 opacity 或者背景漸變透明都會無效了，其實也是有辦法解決的
css3-container { filter:alpha(opacity=80); }
#header-wrapper {
height:35px;
background: -webkit-gradient(linear,left top,left bottom,from(rgba(68,102,113,0.9)),to(rgba(46,74,83,0.9)));
background: -moz-linear-gradient(top, rgba(68,102,113,0.9), rgba(46,74,83,0.9));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6446671', endColorstr='#E62E4A53'); /* IE6,IE7 */
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr='#E6446671', endColorstr='#E62E4A53')"; /* IE8 */
box-shadow:0 1px 3px #000;
}
上麵這個例子中使用背景漸變透明，但因為有 box-shadow 導致透明失效，這個時候需要添加個樣式
css3-container { filter:alpha(opacity=80); }
就可以讓 IE 實現陰影的同時也能背景透明了，不過這樣寫有個問題就是全部的PIE兼容都會透明，所以最好的辦法是有兩個：
1. css 中指定某個具體節點下的 css3-container 透明
這個方法很多時候不好控製，主要是老版本的 IE 的選擇器不好控製
2. 通過 jQuery 動態添加樣式，建議這個方法
隻需要找到當前需要兼容的 div 然後找到他的上一個 css3-container 就可以了
例:
$('.curr').prev('css3-container').css('filter', 'alpha(opacity=80)');
這樣就可以了
另說明：
對淺色如白色之類的背景透明可能效果不是很好，因為PIE的陰影會生成一個全黑的 css3-container 即時使其透明，淺背景色可能顯示效果不太好吧
最後更新：2017-04-03 12:54:57