2013-05-15 28 views
5

İçinde metin bulunan bir div kutusu var (ve bunun bir navbar olması gerekiyor). Div kutusu opaklık 0.4'e ayarlanmış ve bu yüzden metin otomatik olarak da. Metnin normal opaklık olmasını istiyorum (şeffaf değil), ama bunu nasıl yapacağımı anlayamıyorum. Bir div şeffaf/düşük opaklık yapmak mümkün mü, ama içinde metin tutmak mümkün değil mi? Araştırdım ve denedim ama hiçbir şey işe yaramıyor gibi görünüyor.DIV kutusu şeffaf, içindeki metin şeffaf değil

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; 
} 
+0

'arkaplan rengi: rgba (255,255,255,0.4)', ancak bu IE> = 9 içindir. – Passerby

+0

Mümkün yineleme [çocuk öğesi için opaklık nasıl uygulanamaz?] (Http://stackoverflow.com/questions/4182304/how-to-not-apply-opacity-for-child-element) – lifetimes

+0

background-color: rgba (255,255,255,0.4). –

cevap

9

Burada bu

Düzeltme için background-color:rgba(255,255,255,.4); kullanabilirsiniz: yani İçin jsFiddle

düzeltmedir:

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

bunun için bir jeneratör: http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Bu çalışma tüm tarayıcı, ie5/7/6 vs ...

0

İki div'leri sahip olmaktır kullanmak hüner - Arka diğeri metin için.

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

diğer kıvrımlara çözümler vardır ama bunlardan herhangi olarak güvenilir çapraz tarayıcı zannetmiyorum.