父不透明影響孩子圖像不透明

大家好我有問題我有一個父母的div有0.7的不透明度，但我有一個div裏面有一個徽標圖像和父母的不透明度影響它，請幫助我的代碼看起來像這樣父不透明影響孩子圖像不透明

<div class="banner"> 
    <img src="banner.png" width:100%> 
    <div class="navbac"> 
     <div class="logo"></div> 
     <ul class="nav"> 
      <li>a href"#">Home</a></li> 
      <li>a href"#">Contact</a></li> 
      <li>a href"#">About us</a></li> 
     </ul> 
    </div> 
</div>

CSS代碼

.navbac{backgroud:#FFF; opacity:0.7; position:relative;bottom:730px;} 
.logo{background:url(img/logo.PNG) no-repeat; width:257px; height:50px;}

來源

2014-01-11 user2837485

的[我不想繼承的CSS父孩子不透明度]可能重複（ http://stackoverflow.com/questions/5770341/i-do-not-want-to-inherit-the-child-opacity-from-the-parent-in-css） –

如this SO question看到的，你必須使用rgba透明度。如果您希望父div中的文本具有不透明性，那麼您將必須設置跨度文本的不透明度

不透明實際上並未在CSS中實際繼承。這是一個後渲染組變換。換句話說，如果a設置了不透明度，則將div及其所有孩子渲染到臨時緩衝區中，然後將該緩衝區複合到具有給定不透明度設置的頁面中。

.navbac { 
    background:rgba(255,255,255,0.7); 
    position:relative; 
    bottom:0px; 
}

Demo

而且，你的HTML中有多處錯誤，我定格在我的jsfiddle

來源

2014-01-11 14:33:10

父不透明影響孩子圖像不透明

回答

相關問題