CSS background layer translucent content opaque/compatible IE6,IE7,IE8,FF

The code for the first effect (corresponding to the first image) is as follows:

The code is as follows	Copy Code
<table> <tr> &LT;TD style= "WIDTH:143PX; height:251px; " > <div class= "Shadediv" > <p> These p tags are not placed outside the shadow layer </p>//These several P tags are contained in the shadow layer <p class= "White" > is contained inside the shadow layer </p> <p class= "White" > so it's also transparent </p></div> </div> </td> </tr> </table>

About styles:

The code is as follows	Copy Code
<style> shadediv{width:141px margin:0px 1px; z-index:10 height:72px; padding-top:10px; position:absolute; top:172px; Background-color: #777777;/*:rgba (0,0,0,0.3); * * Opacity:0.57;filter:alpha (opacity=57); } . shadediv p{width:100%; text-align:center;} . ppp2{width:141px; height:251px;} </style>

The code for the second effect (corresponding to the second figure) is as follows:

The code is as follows

Copy Code

<table> <tr> &LT;TD style= "WIDTH:143PX; height:251px; " > <div class= "Shadedivwrap" >//Shadow Layer and P tag wrapped in this large div <div class= "Shadediv" ></div>//The lower P tag is outside this shadow layer <p> These p tags should be placed outside the shadow layer </p> <p style= "color: #ffffff" > Transparent effect on shaded layers </p> <p style= "color: #ffffff" > Have no effect on them </p> </div> </td> </tr> </table>

About styles:

The code is as follows	Copy Code
<style> . shadedivwrap{width:141px margin:0px 1px; z-index:10 height:72px; padding-top:10px; position:absolute; top:172px;} . shadediv{width:141px height:72px background-color: #777777;/*:rgba (0,0,0,0.3); * * Opacity:0.57;filter:alpha ( OPACITY=57); Z-index:-1; Position:absolute; } . shadedivwrap p{width:100%; text-align:center; margin-top:3px;} . ppp2{width:141px; height:251px;} </style>

This article is not original, the copyright belongs to the original author.