How do I set a partially transparent background on a div?

Question

I want the divs to be partially transparent so that the background can be seen through, but want the other elements <p> not to be transparent as they are in the image. Currently I am using opacity: .4.

HTML

<!-- tarifas starts here-->
![<div class="tarifas">
    <h1>Tarifas</h1>

  <h3>Consigue la máxima experiencia sin preocuparte por el roaming</h3>

  <div class="tarifas_left">
    <div class="tarifas_left_top">
      <p>5€<span>/día</span></p>
    </div>

    <div class="tarifas_left_bottom">
      <p>hasta<span>1Gb</span>/día</p>

      <p>router wifi movil</p><button>
      <p>RESERVAR</p></button>
    </div>
  </div>

  <div class="tarifas_right">
    <div class="tarifas_right_top">
      <p>30€<span>/mes</span></p>
    </div>

    <div class="tarifas_right_bottom">
      <p>hasta<span>7Gb</span>/día</p>

      <p>router wifi movil</p><button>
      <p>RESERVAR</p></button>
    </div>
  </div>
</div>

CSS

tarifas {
  background:url(image/air_image1.jpg) no-repeat scroll 0 -332px rgba(0,0,0,0);
  height:460px;
  position:relative;
  width:100%
}

.tarifas h1 {
  font-size:40px;
  color:#fff;
  margin-left:500px;
  margin-top:28px;
  position:absolute;
  font-family:HelveticaNeue-Light
}

.tarifas h3 {
  font-size:24px;
  color:#fff;
  margin-left:232px;
  margin-top:100px;
  position:absolute;
  font-family:HelveticaNeue-Light
}

.tarifas_left_top {
  position:absolute;
  width:285px;
  height:80px;
  background-color:#AEABA1;
  margin-top:150px;
  margin-left:290px;
  border-radius:10px 10px 0 0;
  opacity:.4;
  border:2px solid #fff
}

.tarifas_left_bottom {
  position:absolute;
  width:285px;
  height:170px;
  background-color:#AEABA1;
  margin-top:237px;
  margin-left:290px;
  border-radius:0 0 10px 10px;
  opacity:.4;
  border:2px solid #fff
}

.tarifas_left_top p {
  font-size:67.48px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light;
  opacity:1
}

.tarifas_left_top p span {
  font-size:12px;
  color:#fff;
  font-family:HelveticaNeue-Light
}

.tarifas_left_bottom p:nth-child(1) {
  font-size:12px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light
}

.tarifas_left_bottom p:nth-child(1) span {
  font-size:24px;
  color:#fff;
  font-family:HelveticaNeue-Light
}

.tarifas_left_bottom p:nth-child(2) {
  font-size:24px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light
}

.tarifas_left_bottom button {
  border-radius:10px;
  color:#fff;
  font-size:20px;
  height:39px;
  margin-left:65px;
  margin-top:55px;
  width:155px;
  font-family:HelveticaNeue-Light;
  opacity:1
}

.tarifas_right_top {
  position:absolute;
  width:285px;
  height:80px;
  background-color:#AEABA1;
  margin-top:150px;
  margin-left:600px;
  border-radius:10px 10px 0 0;
  opacity:.4;
  border:2px solid #fff
}

.tarifas_right_bottom {
  position:absolute;
  width:285px;
  height:170px;
  background-color:#AEABA1;
  margin-top:237px;
  margin-left:600px;
  border-radius:0 0 10px 10px;
  opacity:.4;
  border:2px solid #fff
}

.tarifas_right_top p {
  font-size:67.48px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light
}

.tarifas_right_top p span {
  font-size:12px;
  color:#fff;
  font-family:HelveticaNeue-Light
}

.tarifas_right_bottom p:nth-child(1) {
  font-size:12px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light
}

.tarifas_right_bottom p:nth-child(1) span {
  font-size:24px;
  color:#fff;
  font-family:HelveticaNeue-Light
}

.tarifas_right_bottom p:nth-child(2) {
  font-size:24px;
  color:#fff;
  text-align:center;
  font-family:HelveticaNeue-Light
}

.tarifas_right_bottom button {
  border-radius:10px;
  color:#fff;
  font-size:20px;
  height:39px;
  margin-left:65px;
  margin-top:55px;
  width:155px;
  font-family:HelveticaNeue-Light;
  opacity:1
}

and the screenshot:

Answer 1

For the classes .tarifas_left_top and .tarifas_left_bottom, remove the opacity and instead use background-color: rgba(#,#,#,#). For the background color #AEABA1 with opacity 0.4, this translates to background-color: rgba(174,171,161,0.4).

For IE 8 and below, you'll need to override the background with a filter property.

.tarifas_left_top {
    background-color: rgba(174,171,161,0.4);
    background: transparent\9;
    /* This '\9' is intentional. It's a CSS hack, but
       it works, and it resets the background in IE 8
       and below only. */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66AEABA1,endColorstr=#66AEABA1); 
    zoom: 1;
}

Effectively, this gives you cross-browser semi-transparent backgrounds without affecting the opacity of the element's children. These properties can also be used for the border-color and color properties.

Answer 2

Use rgba colors rather than opacity which affects the children of an element.

So for instance

background-color: #AEABA1
opacity: .4

would translate into:

background-color: rgba(174, 171, 161, 0.4)

You can find a HEX to RGBA convertor here