用一個大的div來包裹陰影層（半透明div）和p標記，p標記要放在陰影層之外；然后利用position:absolute、z-index、background-color、opacity、filter:alpha(opacity)等等樣式，就能實現想要的效果。
效果如圖：
第一種效果（對應第一圖）的代碼如下：
1 <table> 2 <tr> 3 <td style="width:143px; height:251px;"> 4 <div class="shadeDiv"> 5 <p>這幾個P標記沒有放在陰影層的外面</p> //這幾個p標記包含在陰影層中 6 <p class="white">而是包含在陰影層的里面</p> 7 <p class="white">所以也被透明化了</p></div> 8 </div> 9 <img class="ppp2" src="../img/distributionplatform/goodsimg/020355H11-0.jpg" /> 10 </td> 11 </tr> 12 </table>
關於樣式：
1 <style> 2 .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); } 3 .shadeDiv p{width:100%; text-align:center;} 4 .ppp2{width:141px; height:251px; } 5 </style>
第二種效果（對應第二圖）的代碼如下：
<table> <tr> <td style="width:143px; height:251px;"> <div class="shadeDivWrap"> //陰影層和p標記包在這個大的div中 <div class="shadeDiv"></div> //下面的p標記在此陰影層之外 <p>這幾個P標記要放在陰影層的外面</p> <p style="color:#ffffff">對陰影層使用透明化效果</p> <p style="color:#ffffff">對它們不會有影響</p> </div> <img class="ppp2" src="../img/distributionplatform/goodsimg/020355H11-0.jpg" /> </td> </tr> </table>
關於樣式：
<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>
本文非原創，版權歸原作者所有。