Background opacity, text no opacity

HTML & CSS
1

Hi all

I hava a demo here - http://www.ttmt.org.uk/opacity/

It’s a simple <a> link containing a <h2>

I need the <a> to have 50% opacity but the text in the <h1> to be 100%

I need the text to be like in the first <a> and background like the second <a>


<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">

  <!--jQuery-->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>


  <!--css-->
  <link rel="stylesheet" href="css/master.css" />

  <style type="text/css">

    *{
      margin:0;
      padding:0;
    }
    html,body{
      height:100%;
      background:#fff;
      font-family:Helvetica, sans-serif;
    }
    #wrapper{
      width:900px;
      background:#ccc;
      min-height:100%;
      margin:0 auto;
      position:relative;
    }
    .btn{
      position:absolute;
      left:0;
      top:200px;
      display:inline-block;
      width:400px;
      padding:20px;
      margin:50px;
      text-decoration:none;
    }

    #red{
      opacity:.5;
      background:red;
    }
    .btn:first-of-type{
      top:50px;
      opacity:1;
    }
    h2{
      color:#fff;
      font-size:40px;
      opacity:1;
      display:block;
    }
  </style>


  <title>Title of the document</title>
  </head>

<body>

  <div id="wrapper">

    <img src="img.jpg" alt="">


    <a href="" class="btn"><h2>Click Here</h2></a>

    <div id="red">
      <a href="" class="btn"><h2>Click Here</h2></a>
    </div>


  </div>

</body>

</html>
2

To accomplish this you need to use an RGBA colour on the background itself as opacity changes the alpha channel for all child nodes within the parent element itself. E.g.

.btn {
    background-color: rgba(255,0,0, .5);
}
3

Thanks for that