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 即时使其透明,浅背景色可能显示效果不太好吧

目录
相关文章
|
5月前
Qt绘图(线条、椭圆、矩形、图片滚动)
Qt绘图(线条、椭圆、矩形、图片滚动)
335 3
|
6月前
添加渐变色
添加渐变色
34 0
|
JSON 数据格式
Echarts饼状图修改图例legend文字颜色和字体大小
Echarts饼状图修改图例legend文字颜色和字体大小
1444 1
|
6月前
transform实现按钮边框旋转效果
transform实现按钮边框旋转效果
|
6月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
前端开发
css:border-radius绘制边框圆角-全圆和椭圆
css:border-radius绘制边框圆角-全圆和椭圆
139 0
css:border-radius绘制边框圆角-全圆和椭圆
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
CSS3文本居中显示、圆形圆角绘制、立体阴影效果设置实例演示
131 0
|
前端开发
canvas绘制五角星
canvas绘制五角星
182 0
Core Animation - 如何来绘制三个圆角一个直角的矩形
Core Animation - 如何来绘制三个圆角一个直角的矩形
77 0