How to make the background transparent for each area but not the content in HTML

Question

I have this code which splits the page into 6. How do I make each segment transparent but not the actual content This is what I have before but I am not sure on what to do I have tried creating a div for the content and changing the transparency to 1 but that doesn't work so what should I do.

The images are random

Here is the CSS

html, body { 
height: 100%; 
padding: 0; 
margin: 0; 
}
#div1, #div2, #div3, #div4, #div5, #div6 { 
 width: 50%;
 height: 50%; 
 float: left; 
}
#div1 { 
  height: 50%;
  width: 50%;
  opacity: 0.5;
  color: black;
  background-image: url("http://htmlcolorcodes.com/assets/images/html-color-codes-color-tutorials-hero-00e10b1f.jpg");
}

#div2 { 
  height: 50%;
  width: 50%;
  opacity: 0.5;
  color: black;
 background-image: url("http://www.intrawallpaper.com/static/images/abstract-mosaic-background.png");
}

#div3 { 
 background-image: url("http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg");
}

#div4 { 
 background: #444; 
}

#div5 { 
 background: #555; 
}

#div6 { 
 background: #666; 
}

<div id="div1">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure mollitia molestias recusandae nulla placeat repellat odio eos. Blanditiis nulla suscipit sequi ducimus distinctio quo tempore.</p>
</div>
<div id="div2">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure mollitia molestias recusandae nulla placeat repellat odio eos. Blanditiis nulla suscipit sequi ducimus distinctio quo tempore.</p>
</div>
<div id="div3">
</div>
<div id="div4">
</div>
<div id="div5">
</div>
<div id="div6">
</div>

Answer 1

So, you want to change the transparency, but not the transparency of the text?

You can increase the opacity (ranges from 0.0 - 1.0, the lower the number, the more transparent the image).

You can also use RGBA color values when you don't want to apply opacity to the child elements (in this case, your paragraph content.

From w3schools.com: http://www.w3schools.com/css/css_image_transparency.asp

An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

Example code:

div {
background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */

}

Hope this helps!