title: Transparent background affecting color of text
body: <p>I have a box with transparent background color, below is the CSS &amp; HTML.</p>
  
  <p>CSS:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="box" class="center"&gt;
      I need this text to be black.
  &lt;/div&gt;
  </code></pre>
  
  <p>You can see a demo here: <a href="http://jsfiddle.net/jrmXh/" rel="nofollow">http://jsfiddle.net/jrmXh/</a></p>
  
  <p>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. </p>