CSS opacity background color and text not working

Question

I'm making an app for FireFox OS and I want to make button background opacity 0.5 and the text opacity 1 but it doesn't 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>

That is the difference between [opacity and alpha](http://jsfiddle.net/LgYDE/) — Ron van der Heijden, Aug 22 '13 at 09:54

score 13 · Accepted Answer · answered Aug 22 '13 at 09:21

13

You should read about rgba

This is the syntax:

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

Here's a Hex-to-RGB Color Converter

answered Aug 22 '13 at 09:21

Itay

16,601
2
51
72

score 3 · Answer 2 · answered Aug 22 '13 at 09:43

3

You should use rgba() to set the background-color with desired opacity It won't change the text's opacity.

Read more about rgba at CSS3.INFO

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

See this DEMO

answered Aug 22 '13 at 09:43

softvar

17,917
12
55
76

score 1 · Answer 3 · answered Aug 22 '13 at 09:23

You can't give opacity only to the background without affecting the rest...
Instead, try with alpha in background-color.

Ex.

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

score 0 · Answer 4 · answered Aug 22 '13 at 09:21

That seems impossible indeed. You can try making a .buttonwrapper instead of .button. Inside .buttonwrapper you place two absolute positioned layers, one with the actual button with an opacity of 0.5, and one above it with the text at opacity of 1, without background.

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

CSS opacity background color and text not working

4 Answers4