DIV 框透明，里面的文字不透明

Posted 2023-03-06

【中文标题】DIV 框透明，里面的文字不透明

【英文标题】：DIV box transparent, text inside not transparent

【发布时间】：2013-05-09 20:39:40

【问题描述】：

我有一个 div 框，里面有文本（这应该是一个导航栏）。div 框设置为不透明度 0.4，文本也自动设置。我希望文本是正常的不透明度（不透明），但我不知道该怎么做。是否可以使 div 透明/低不透明度但不保留文本？我已经搜索并尝试过，但似乎没有任何效果。

html

<div class="finboks">
           <br><br> 
              <li><font size="3px"><a href="index.html">HEIM</a></font></li>
              <li><font size="3px"><a href="elevane.html">ELEVANE</a></font></li>
              <li><font size="3px"><a href="tilsette.html">TILSETTE</a></font></li>
              <li><font size="3px"><a href="Bilete.html">BILETE</a></font></li>
              <li><font size="3px"><a href="kontakt.html">KONTAKT</a></font></li>
              <li><font size="3px"><a href="omskulen.html">OM SKULEN</a></font></li>

              <select name="jumpMenu2" id="jumpMenu2" onchange="MM_jumpMenu('parent',this,0)">
                <option> LENKJER </option>
                <option value="https://fronter.com/sognfjordanegs/index.phtml">Fronter</option>
                <option value="https://www.gaular.kommune.no/Filnedlasting.aspx?MId1=39&amp;FilId=335">Skuleruta 2012-13</option>
              </select>
            </ul>
          </div>

CSS

div.finboks
position: absolute; 
width: 1349px;  
height: 115px; 
opacity: 0.4; 
z-index: 2; 
left: 5px;
top: 102px;
background-color: #FFFFFF;

【问题讨论】：

background-color:rgba(255,255,255,0.4)，但这是针对 IE>=9。

how to not apply opacity for child element? 的可能重复项

背景色：rgba(255,255,255,0.4)。

【参考方案1】：

您可以为此使用background-color:rgba(255,255,255,.4);

此处更正：jsFiddle

对于即修复是：

-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF,endColorstr=#66FFFFFF);/*IE fix */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFFFFF,endColorstr=#66FFFFFF);     /* IE Fix */

这里有一个生成器：http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

这适用于所有浏览器，ie5/6/7 等...

【参考方案2】：

我使用的技巧是有两个 div - 一个用于背景，一个用于文本。

<div class="finboksBackground"></div>
<div class="finboks">
           <br><br> 
              <li><font size="3px"><a href="index.html">HEIM</a></font></li>
              <li><font size="3px"><a href="elevane.html">ELEVANE</a></font></li>
              <li><font size="3px"><a href="tilsette.html">TILSETTE</a></font></li>
              <li><font size="3px"><a href="Bilete.html">BILETE</a></font></li>
              <li><font size="3px"><a href="kontakt.html">KONTAKT</a></font></li>
              <li><font size="3px"><a href="omskulen.html">OM SKULEN</a></font></li>

              <select name="jumpMenu2" id="jumpMenu2" onchange="MM_jumpMenu('parent',this,0)">
                <option> LENKJER </option>
                <option value="https://fronter.com/sognfjordanegs/index.phtml">Fronter</option>
                <option value="https://www.gaular.kommune.no/Filnedlasting.aspx?MId1=39&amp;FilId=335">Skuleruta 2012-13</option>
              </select>
            </ul>
          </div>

css：

div.finboks 
    position: absolute; 
    width: 1349px;  
    height: 115px; 
    z-index: 2; 
    left: 5px;
    top: 102px;


div.finboksBackground 
    position: absolute; 
    width: 1349px;  
    height: 115px; 
    opacity: 0.4; 
    z-index: 2; 
    left: 5px;
    top: 102px;
    background-color: #FFFFFF;

还有其他更简洁的解决方案，但我认为它们中的任何一个都不能作为可靠的跨浏览器工作。