Rendere trasparente lo sfondo del testo ma non il testo stesso

Quindi sto avendo un problema. Mi sono guardato intorno e mi sono guardato intorno ma senza fortuna. Vorrei rendere trasparente lo sfondo del mio corpo ma lasciare il testo non trasparente. Così com'è adesso, continuo a creare la stessa opacità. Ecco il mio codice:

@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;
}

Ecco il mio sito web (clicca sul link non digitare "tccraft.net" nel tuo URL ti porterà a una pagina Facebook): http://tccraft.net/index.php Grazie!

Non usare opacityper questo, imposta lo sfondo su un valore RGBA invece di rendere lo sfondo semitrasparente. Nel tuo caso sarebbe così.

.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);
}

Vedi http://css-tricks.com/rgba-browser-support/ per maggiori informazioni ed esempi di valori rgba in css.

Per uno sfondo completamente trasparente utilizzare:

background: transparent;

Altrimenti per un riempimento colore semitrasparente utilizzare:

background: rgba(255,255,255,0.5); // or hsla(0, 0%, 100%, 0.5)

dove i valori sono:

background: rgba(red,green,blue,opacity); // or hsla(hue, saturation, lightness, opacity)

È inoltre possibile utilizzare i valori rgba per gli sfondi sfumati.

Per ottenere la trasparenza sullo sfondo di un'immagine, è sufficiente ridurre in anticipo l'opacità dell'immagine in un editor di immagini di tua scelta.

opacityrenderà trasparenti sia il testo che lo sfondo. Utilizzare invece un colore di sfondo semitrasparente, utilizzando un rgba()valore ad esempio. Funziona su IE8 +

Se utilizzi RGBA per i browser moderni, non è necessario che i vecchi IE utilizzino solo la versione non trasparente del colore dato con RGB.

Se non ti attieni alle soluzioni solo CSS, prova CSS3PIE . Con questa sintassi puoi vedere esattamente lo stesso risultato nei vecchi IE che vedi nei browser moderni:

div {
    -pie-background: rgba(223,231,233,0.8);
    behavior: url(../PIE.htc);
}

box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.54);