2014-02-05 31 views
0

我試圖在不透明度爲60%的DIV內添加圖像和文本框。出於某種原因,這兩個對象也繼承了不透明性。我如何防止它?如何在DIV中添加對象並出現在DIV上方

HTML:

<body> 
<div id="sliderdiv"> 
<div id="slider"> 
      <img src="i2.jpg" alt="" /> 
      <img src="i3.jpg" alt="Pure Javascript. No jQuery. No flash." /> 
      <img src="i4.jpg" alt="#htmlcaption" /> 
      <img src="i5.jpg" /> 
     </div> 
     <div id="htmlcaption" style="display: none;"> 
      <em>HTML</em> caption. Link to <a href="http://www.google.com/">Google</a>. 
     </div> 

</div> 
<div id="bg"> 
    <img src="wmlogo.jpg" width="140" height="30" alt="Westmed Medical Group" title="Westmed Medical Group Homepage" id="logoimg" /> 
    <input type=text size=25 id=insidebgtext /> 
</div> 
</body> 

CSS:

* { 
    background-color: #CC0000; 
    padding: 0px; 
    margin: 0px; 
} 
#bg { 
    position: absolute; 
    background-color: #000000; 
    height: 50px; 
    width: 100%; 
    opacity:0.6; 
    filter:alpha(opacity=60); /* For IE8 and earlier */ 
    z-index: 1; 
} 
#insidebgtext { 
    position: absolute; 
    top: 25%; 
    right: 20%; 
    background-color: #FFFFFF; 
    z-index: 25; 
} 
#sliderdiv 
{ 
position:absolute; 
left:0px; 
top:0px; 
width: 100%; 
height: 306px; 
z-index:-1; 
background-color: #FCFCFC; 
} 

#logoimg { 
    position: absolute; 
    top: 15%; 
    left: 25%; 
    z-index: 25; 
} 

它是如何出現:

enter image description here

+0

你試過給他們一個0的不透明度嗎? – JochemQuery

+2

你應該使用背景顏色代替不透明度來應用rgba的不透明度:.6; –

+0

0的不透明度使對象消失,我將它設置爲1,它只是具有相同的效果... – Si8

回答

1

家長在孩子的特性非常明顯的繼承。爲了您的目的,您可以使用代理方式使用透明PNG圖像作爲背景,並避免使用不透明度

+0

完美!不知道是這麼簡單 – Si8

+0

歡迎你好友:) @ SiKni8 –