css背景層半透明內容不透明/能兼容ie6，ie7，ie8，ff

時間 2019-11-29

標籤 css 背景半透明內容不透明兼容 ie6 ie7 ie8 欄目 CSS 简体版

原文原文鏈接

用一個大的div來包裹陰影層（半透明div）和p標記，p標記要放在陰影層以外；而後利用position:absolute、z-index、background-color、opacity、filter:alpha(opacity)等等樣式，就能實現想

第一種效果（對應第一圖）的代碼以下：spa

代碼以下

複製代碼

<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>orm

關於樣式：ci

代碼以下	複製代碼
<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>

第二種效果（對應第二圖）的代碼以下：it

代碼以下

複製代碼

<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>io

</div>
<img class="ppp2" src="../img/distributionplatform/goodsimg/020355H11-0.jpg" />table

</td>
</tr>
</table>form

關於樣式：class

代碼以下

複製代碼

<style>scroll

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

.ppp2{width:141px; height:251px; }

</style>

本文非原創，版權歸原做者全部。