Question

我正在为firefox操作系统制作应用程序，我想让按钮背景不透明度为0.5，文本不透明度为1 ......但它没有用...检查css：

.button{
height:40px;
width:180px;
border-radius: 100px 100px 100px 100px;
border: 1px solid #FF9924;
display:inline-block;
background-color:#FF9924;
padding-top:5px;
opacity:0.5;
}


h1{
    padding: 5px 5px 5px 5px;
    text-align:center;
    font-size:20px;
    font-family: firstone;
    opacity:1.0;
}

页面上的

：

<div class="menu">
    <div class="button"><h1>Start the fight</h1></div>
</div>

Answer 1

您应该阅读rgba

这是语法：

 .button {
      background-color: rgba(255, 153, 36, 0.5)
 }

这是Hex-to-RGB Color Converter

Answer 2

您应该使用rgba()设置background-color所需的opacity它不会更改文字的不透明度。

在CSS3.INFO

了解有关rgba的更多信息

.button {
   //...
   background-color: rgba(255, 153, 36, 0.5); 
   //...
}

请参阅此DEMO

Answer 3

这确实是不可能的。您可以尝试使用.buttonwrapper而不是.button。在.buttonwrapper里面放置两个绝对定位的图层，一个是实际按钮，不透明度为0.5，另一个是文本，不透明度为1，没有背景。

<div class="buttonwrapper">
    <div class="button"></div>
    <div class="button_text"><h1>Text</h1></div>
</div>

Answer 4

您不能仅将opacity提供给后台，而不会影响其余部分...
相反，请尝试使用alpha中的background-color。

实施例

.button{
  background-color: #FF9924; // for browser that don't accept alpha in color
  background-color: rgba(255, 153, 36, 0.5);
}

CSS不透明度背景颜色和文本无效

4 个答案: