Metin arka planını saydam yapma ancak metnin kendisini değil

Yani bir sorun yaşıyorum. Etrafa baktım ve etrafa baktım ama şansım yok. Vücudumun arka planını şeffaf yapmak, ancak metni şeffaf olmadan bırakmak istiyorum. Şu anda olduğu gibi ikisini de aynı opaklığı yapmaya devam ediyorum. İşte kodum:

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

İşte web sitem (url'nize "tccraft.net" yazmayın bağlantıya tıklayın, sizi bir facebook sayfasına götürecektir): http://tccraft.net/index.php Teşekkürler!

Bunun için kullanmayın opacity, sadece arka planı yarı saydam yapmak için arka planı bir RGBA değerine ayarlayın. Senin durumunda böyle olurdu.

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

Daha fazla bilgi ve css'deki rgba değerleri örnekleri için http://css-tricks.com/rgba-browser-support/ adresine bakın .

Tamamen şeffaf bir arka plan kullanımı için:

background: transparent;

Aksi takdirde, yarı saydam bir renk dolgusu için:

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

değerler nerede:

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

Degrade arka planlar için de rgba değerlerini kullanabilirsiniz.

Bir görüntü arka planında şeffaflık elde etmek için, önceden seçtiğiniz bir görüntü düzenleyicide görüntünün opaklığını azaltın.

opacityhem metni hem de arka planı şeffaf hale getirir. Bunun yerine, rgba()örneğin bir değer kullanarak yarı saydam bir arka plan rengi kullanın . IE8 + üzerinde çalışır

Modern tarayıcılar için RGBA kullanıyorsanız, eski IE'lerin RGB ile verilen rengin yalnızca şeffaf olmayan versiyonunu kullanmasına izin vermenize gerek yoktur.

Yalnızca CSS çözümlerine bağlı kalmazsanız , CSS3PIE'yi deneyin. Bu sözdizimi ile, modern tarayıcılarda gördüğünüz eski IE'lerde tam olarak aynı sonucu görebilirsiniz:

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

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