Opacitet med RGBa utan att innehållet blir transparent

Box 1

#box1 {
width: 300px;
float: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background-color:
rgba(255,255,255, 0.3);
}

Box 2

#box2 {
width: 300px;
float: left;
clear: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background-color:
rgba(255,255,255, 0.5);
}

Box 3

#box3 {
width: 300px;
float: left;
clear: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background-color:
rgba(255,255,255, 0.7);
}

Box 4

#box4 {
width: 300px;
float: left;
clear: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background-color:
rgba(255,255,255, 0.9);
}

CSS-kod:

#box {
width: 300px;
float: left;
margin: 20px;
padding: 20px;
border: 15px solid #fff;
border-radius: 20px;
box-shadow:
5px 5px 10px rgba(0,0,0, 0.4);
background-color: rgba(255,255,255, 0.3);
}

HTML-kod:

<div id="box">
<p> Textinnehåll här.</p>
</div>