Making text background transparent but not text itself

Question

So I am having a problem. I have looked around and looked around but no luck. I would like to make the background of my body transparent but leave the text non transparent. As it is right now I keep making both the same opacity. Here is my code:

@charset "utf-8"; body {     font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;     background-color: #42413C;     margin: 0;     padding: 0;     color: #000; }  /* ~~ Element/tag selectors ~~ */ ul, ol, dl {      padding: 0;     margin: 0; } h1, h2, h3, h4, h5, h6, p {     margin-top: 0;     padding-right: 15px;     padding-left: 15px;     opacity:1; } a img {      border: none; } a:link {     color: #42413C;     text-decoration: underline; } a:visited {     color: #6E6C64;     text-decoration: underline; } a:hover, a:active, a:focus {     text-decoration: none; } .container {     width: 750px;     margin: 0 auto; } .content {     padding:20px;     width:710px;     position:relative;     background:#CCC;     opacity: 0.5; } .fltrt {     float: right;     margin-left: 8px; } .fltlft {      float: left;     margin-right: 8px; } .clearfloat {      clear:both;     height:0;     font-size: 1px;     line-height: 0px; } .header {     top:0%;     width: 750px;     height: 200px;     background-image: url(images/header.png);     background-repeat:no-repeat;     background-position:center; } .navbar {     height: 50px;     width: 750px;     position: relative;     z-index: 2; } #bg {     position: fixed;     top: 25%;     left: 15%;     z-index: -1; } div { display: block; } 

Here is my website (click the link dont type "tccraft.net" in your url it will take you to a facebook page): http://tccraft.net/index.php Thank you!

Answer 1

Don't use opacity for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this.

.content {     padding:20px;     width:710px;     position:relative;     background: rgb(204, 204, 204); /* Fallback for older browsers without RGBA-support */     background: rgba(204, 204, 204, 0.5); } 

See http://css-tricks.com/rgba-browser-support/ for more info and samples of rgba-values in css.