Rendre l'arrière-plan du texte transparent mais pas le texte lui-même

J'ai donc un problème. J'ai regardé autour de moi et j'ai regardé autour de moi mais pas de chance. Je voudrais rendre l'arrière-plan de mon corps transparent mais laisser le texte non transparent. Dans l'état actuel des choses, je continue à faire les deux la même opacité. Voici mon 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;
}

Voici mon site web (cliquez sur le lien ne pas taper "tccraft.net" dans votre url cela vous mènera à une page facebook): http://tccraft.net/index.php Merci!

Ne l'utilisez pas opacitypour cela, définissez plutôt l'arrière-plan sur une valeur RGBA pour ne rendre l'arrière-plan semi-transparent. Dans votre cas, ce serait comme ça.

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

Voir http://css-tricks.com/rgba-browser-support/ pour plus d'informations et des exemples de valeurs rgba en css.

Pour un arrière-plan totalement transparent, utilisez:

background: transparent;

Sinon, pour un remplissage de couleur semi-transparent, utilisez:

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

où les valeurs sont:

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

Vous pouvez également utiliser les valeurs rgba pour les arrière-plans dégradés.

Pour obtenir de la transparence sur un fond d'image, réduisez simplement l'opacité de l'image dans un éditeur d'image de votre choix au préalable.

opacityrendra le texte et l'arrière-plan transparents. Utilisez plutôt une couleur d'arrière-plan semi-transparente, en utilisant une rgba()valeur par exemple. Fonctionne sur IE8 +

Si vous utilisez RGBA pour les navigateurs modernes, vous n'avez pas besoin de laisser les IE plus anciens utiliser uniquement la version non transparente de la couleur donnée avec RVB.

Si vous ne vous en tenez pas aux solutions CSS uniquement, essayez CSS3PIE . Avec cette syntaxe, vous pouvez voir exactement le même résultat dans les anciens IE que vous voyez dans les navigateurs modernes:

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

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