CSS krycie koloru tła i tekstu nie działa

Question

im podejmowania app for Firefox OS i chcę, aby przycisk tła krycie 0,5, a tekst krycie 1 ... ale nie zrobił praca ... sprawdź 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; 
} 

na stronie:

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

Answer 1

należy przeczytać o rgba

to składnia:

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

Oto Hex-to-RGB Color Converter

Answer 2

To wydaje się wręcz niemożliwe. Możesz spróbować zrobić .buttonwrapper zamiast .button. Wewnątrz .buttonwrapper umieszczasz dwie warstwy absolutnie pozycjonowane, jedną z rzeczywistym przyciskiem o kryciu 0,5, a jedną nad nim z tekstem o kryciu równym 1, bez tła.

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

Answer 3

Nie można dać opacity tylko w tle, bez wpływu na pozostałe ...
Zamiast tego, spróbuj alpha w background-color.

Przykł.

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

Answer 4

Należy użyć rgba() ustawić background-color z żądanym opacity Nie zmieni krycie tekstu za.

Więcej o RGBA w CSS3.INFO

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

Zobacz ten DEMO