CSS màu nền opacity và văn bản không làm việc

Question

im làm một ứng dụng cho firefox OS và tôi muốn làm nền nút opacity 0,5 và văn bản opacity 1 ... nhưng nó làm việc ... kiểm tra các 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; 
} 

trên trang:

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

Answer 1

Bạn nên đọc về rgba

Đây là cú pháp:

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

Dưới đây là một Hex-to-RGB Color Converter

Answer 2

Đó dường như không thể thực sự. Bạn có thể thử làm một .buttonwrapper thay vì .button. Bên trong .buttonwrapper bạn đặt hai lớp vị trí tuyệt đối, một với nút thực tế với độ mờ là 0,5, và một ở trên nó với văn bản ở độ mờ 1, không có nền.

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

Answer 3

Bạn không thể cung cấp cho opacity chỉ đến nền mà không ảnh hưởng đến phần còn lại ...
Thay vào đó, hãy thử với alpha trong background-color.

Ví dụ:

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

Answer 4

Bạn nên sử dụng rgba() để thiết lập background-color với mong muốn opacity Nó sẽ không thay đổi opacity của văn bản.

Đọc thêm về rgba tại CSS3.INFO

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

Xem này DEMO