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

我试图设计一个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

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

回答

相关问题