不透明元素上的不透明元素

我試圖設計一個div內的按鈕。該div的不透明度爲0.8，但我不希望它的按鈕（子按鈕）具有其超級（祖先）div的不透明度。這怎麼能夠實現？我已經嘗試過這種HTML：不透明元素上的不透明元素

<div class="divBox"> 
     <span class="title"> Some title </span> 
     <hr> 

     <div> 
      <span> Some Content </span> 
     </div> 

     <div class="divButton"> 
      <a class="myButton"> Button </a> 
     </div> 
</div>

的CSS：

.divBox{ 
    background-color: #ffffff; 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    padding: 2%; 
} 

.divButton{ 
    text-align: left; 
    padding-bottom: 1%; 
    padding-top: 3%; 
} 

.myButton{ 
    background-color: #295b9f; 
    color: white; 
    padding: .5em .5em; 
    cursor: pointer; 
    border: aliceblue; 
    -webkit-border-radius: 20px; 
    border-radius: 3px; 
    margin-top: 2%; 
    opacity: 1; 
}

感謝您的幫助

來源

2014-01-16 ben ezra

使用rgba(r, g, b, a)background-color而不是opacity家長和孩子都。 a指的是alpha值或不透明度。

即

.parent { 
    background-color: rgba(255,0,0, 0.8); /* change r,g,b as needed */ 
} 

.parent .child { 
    background-color: rgba(255,0,0, 1); /* change r,g,b as needed */ 
}

來源

2014-01-16 09:10:26 techfoobar

它不工作對我來說 –

刪除'''' - 它們不是有效的CSS註釋。看到這個小提琴：http://jsfiddle.net/uLLA7/ – techfoobar

謝謝你的工作。我有一個錯誤。 –

您可以修改HTML一點，並添加透明度這一類「不透明層」

<div class="divBox"> 
    <div class="opacity-layer"> 
    <span class="title"> Some title </span> 
    <hr> 

     <div> 
     <span> Some Content </span> 
     </div> 
    </div> 
    <div class="divButton"> 
     <a class="myButton"> Button </a> 
    </div>

來源

2014-01-16 10:06:12 abhiklpm

不透明元素上的不透明元素

回答

相關問題