Background of the transparent PIE method using a shadow

Why 80% of the code can not do farming architect? >>>  

After using PIE, we will find that if there is set box-shadow, the current settings class style opacity or gradient background transparent will be invalid, but in fact there is a solution

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;
}

Using the example above background gradient transparent, but because there is a transparent box-shadow cause failure, this time to add stylesheet

css3-container { filter:alpha(opacity=80); }

At the same time you can make IE can achieve the shadow of a transparent background, but there is a problem is to write all of the PIE will be compatible transparent, so the best approach is two-fold:

1. css css3-container transparent specified under a specific node

this method very often not easy to control, mainly the older versions of IE selector poor control

2. Dynamic add style by jQuery, recommend this method

only need to find the current It requires a compatible div then find him on a css3-container on it

Example:

$('.curr').prev('css3-container').css('filter', 'alpha(opacity=80)');

that's it

Another explanation:

Transparent to light, such as white background and the like probably not very good, because the shadow PIE will generate a completely black css3-container instantly make it transparent, light background color display may not be too good

Reproduced in: https: //my.oschina.net/zhouz/blog/213188