CSS不透明的背景顏色和文字工作不

Question

IM製作的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> 

Answer 1

你應該閱讀有關rgba

這是語法：

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

這裏有一個Hex-to-RGB Color Converter

Answer 2

看似不可能，確實如此。您可以嘗試製作.buttonwrapper而不是.button。在.buttonwrapper裏面，你放置了兩個絕對定位的圖層，一個是不透明度爲0.5的實際按鈕，另一個是不透明度爲1的文本，沒有背景。

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

Answer 3

您不僅可以在後臺給opacity不影響休息...
相反，嘗試用alpha在background-color。

Ex。

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

Answer 4

您應該使用rgba()設置background-color與所需opacity它不會改變文本的不透明度。

瞭解更多關於RGBA在CSS3.INFO

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

見本DEMO