CSS opacity background color and text not working

css opacity
user2637946 picture user2637946 · Aug 22, 2013 · Viewed 27.8k times · Source

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>

Answer

Itay picture Itay · Aug 22, 2013

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

Related questions

CSS Background Opacity

I am using something similar to the following code: <div style="opacity:0.4; background-image:url(...);"> <div style="opacity:1.0;"> Text </div> </div> I expected this to make the background have an opacity of 0.4 and …

Read More
CSS opacity only to background color, not the text on it?

Can I assign the opacity property to the background property of a div only and not to the text on it? I've tried: background: #CCC; opacity: 0.6; but this doesn't change the opacity.

Read More
How do I give text or an image a transparent background using CSS?

Is it possible, using CSS only, to make the background of an element semi-transparent but have the content (text & images) of the element opaque? I'd like to accomplish this without having the text and the background as two separate …

Read More