第一种效果（对应第一图）的代码如下：
| 代码如下 | 复制代码 |
|
<table> <tr> <td style="width:143px; height:251px;"> <div class="shadeDiv"> <p>这几个P标记没有放在阴影层的外面</p> //这几个p标记包含在阴影层中 <p class="white">而是包含在阴影层的里面</p> <p class="white">所以也被透明化了</p></div> </div> <img class="ppp2" src="../img/distributionplatform/goodsimg/020355H11-0.jpg" /> </td> </tr> </table> |
|
关于样式：
| 代码如下 | 复制代码 |
| <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> |
|
第二种效果（对应第二图）的代码如下：
| 代码如下 | 复制代码 |
|
<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> </td> |
|
关于样式：
| 代码如下 | 复制代码 |
|
<style> .shadeDivWrap{width:141px; margin:0px 1px; z-index:10; height:72px; padding-top:10px; position:absolute; top:172px;} .ppp2{width:141px; height:251px; } </style> |
|
本文非原创，版权归原作者所有。
时间： 2024-10-28 16:49:50