Question

我有一个带有文本的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;
}

Answer 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/

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

Answer 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;
}

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

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

2 个答案: