Membuat latar belakang teks transparan tetapi bukan teks itu sendiri

Jadi saya mengalami masalah. Saya telah melihat sekeliling dan melihat sekeliling tetapi tidak berhasil. Saya ingin membuat latar belakang tubuh saya transparan tetapi membiarkan teks tidak transparan. Seperti sekarang ini saya tetap membuat keduanya sama-sama opacity. Ini kode saya:

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

Ini adalah situs saya (klik link jangan ketik "tccraft.net" di url Anda, Anda akan dibawa ke halaman facebook): http://tccraft.net/index.php Terima kasih!

Jangan gunakan opacityuntuk ini, setel latar belakang ke nilai RGBA sebagai gantinya hanya membuat latar belakang semi-transparan. Dalam kasus Anda, itu akan menjadi seperti ini.

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

Lihat http://css-tricks.com/rgba-browser-support/ untuk info lebih lanjut dan contoh nilai rgba di css.

Untuk penggunaan latar belakang yang sepenuhnya transparan:

background: transparent;

Jika tidak, untuk penggunaan warna semi-transparan:

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

dimana nilainya:

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

Anda juga dapat menggunakan nilai rgba untuk latar belakang gradien.

Untuk mendapatkan transparansi pada latar belakang gambar, cukup kurangi opasitas gambar di editor gambar pilihan Anda sebelumnya.

opacityakan membuat teks dan latar belakang transparan. Gunakan warna latar semi transparan sebagai gantinya, dengan menggunakan rgba()nilai misalnya. Bekerja di IE8 +

Jika Anda menggunakan RGBA untuk browser modern, Anda tidak perlu membiarkan IE lama hanya menggunakan versi non-transparan dari warna yang diberikan dengan RGB.

Jika Anda tidak berpegang pada solusi khusus CSS, cobalah CSS3PIE . Dengan sintaks ini, Anda dapat melihat hasil yang persis sama di IE lama yang Anda lihat di browser modern:

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

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