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

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

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

Answer 2

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.