Transparent background affecting color of text

Question

I have a box with transparent background color, below is the CSS & HTML.

CSS:

#box {
    color: black;
    text-align: center;
    margin: 50px auto;
    background: blue;
    opacity: 0.1;
    border-radius: 11px;
    box-shadow: 1px 1px 1px #656565;
    padding: 20px;
    font-size: 25px;
}

HTML:

<div id="box" class="center">
    I need this text to be black.
</div>

You can see a demo here: http://jsfiddle.net/jrmXh/

As you can see, the color of the text despite being black is not being show, and I would like to know why this is happening, and how to fix it.

Answer 1

The opacity property affects all child elements of the element it's applied to. ie both the element itself and all elements it contains become opaque/transparent. What you need is to apply a rgba value to the div:

#box {
  color:black; 
  text-align:center; 
  margin:50px auto; 
  background: rgba(0,0,255,0.1); 
  border-radius:11px; 
  box-shadow:1px 1px 1px #656565; 
  padding:20px;
  font-size:25px; 
}

Answer 2

Omit out the opacity and make the background color transparent, like this-

#box {
color: black;
text-align: center;
margin: 50px auto;
background: rgba(0, 0, 255, 0.09);
border-radius: 11px;
box-shadow: 1px 1px 1px #656565;
padding: 20px;
font-size: 25px;
}

Answer 3

Apply these changes -

1. Remove Opacity
2. Use background-color:rgba(0,0,255,0.1); instead of blue

background color of body is white that's why you are not able to see the transparency. Try to change body color & you will see the Transparency(alpha in rgba) effect.

Use this code to check transparency effect - Alpha in rgba

<style>
  body{
    background-color:#FF0000;
  }
</style>