CSS opacity background color and text not working

CSS opacity background color and text not working

im making an app for firefox OS and i want to make button background
opacity 0.5 and the text opacity 1... but it didnt work... check the 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;
}
on page:
<div class="menu">
<div class="button"><h1>Start the fight</h1></div>
</div>