13

我正在为 FireFox OS 制作一个应用程序，我想让按钮背景不透明度 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>
4

4 回答 4

11

你应该阅读rgba

这是语法：

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

这是一个十六进制到 RGB 颜色转换器

于 2013-08-22T09:21:33.947 回答
2

您应该使用所需rgba()的设置它不会改变文本的不透明度。background-coloropacity

在CSS3.INFO阅读更多关于 rgba 的信息

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

看这个演示

于 2013-08-22T09:43:52.533 回答
0

这似乎确实是不可能的。您可以尝试制作 .buttonwrapper 而不是 .button。在 .buttonwrapper 中放置两个绝对定位层，一个带有实际按钮，不透明度为 0.5，另一个在其上方，不透明度为 1，没有背景。

<div class="buttonwrapper">
    <div class="button"></div>
    <div class="button_text"><h1>Text</h1></div>
</div>
于 2013-08-22T09:21:45.047 回答
0

你不能opacity只给背景而不影响其余部分......
相反，尝试使用alphain background-color。

前任。

.button{
  background-color: #FF9924; // for browser that don't accept alpha in color
  background-color: rgba(255, 153, 36, 0.5);
}
于 2013-08-22T09:23:11.123 回答