Làm cho nền văn bản trong suốt nhưng không phải chính văn bản

Vì vậy, tôi đang gặp một vấn đề. Tôi đã nhìn quanh và nhìn xung quanh nhưng không có may mắn. Tôi muốn làm cho nền của cơ thể mình trong suốt nhưng không để văn bản trong suốt. Như hiện tại, tôi tiếp tục tạo cả hai độ mờ như nhau. Đây là mã của tôi:

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

Đây là trang web của tôi (nhấp vào liên kết không nhập "tccraft.net" trong url của bạn, nó sẽ đưa bạn đến trang facebook): http://tccraft.net/index.php Cảm ơn bạn!

Không sử dụng opacitycho việc này, hãy đặt nền thành giá trị RGBA để chỉ làm cho nền nửa trong suốt. Trong trường hợp của bạn, nó sẽ như thế này.

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

Xem http://css-tricks.com/rgba-browser-support/ để biết thêm thông tin và các mẫu giá trị rgba trong css.

Để sử dụng nền hoàn toàn trong suốt:

background: transparent;

Nếu không, để sử dụng tô màu nửa trong suốt:

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

trong đó các giá trị là:

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

Bạn cũng có thể sử dụng các giá trị rgba cho nền gradient.

Để có được độ trong suốt trên nền hình ảnh, chỉ cần giảm độ mờ của hình ảnh trong trình chỉnh sửa hình ảnh bạn chọn trước.

opacitysẽ làm cho cả văn bản và nền trong suốt. Thay vào đó, hãy sử dụng màu nền nửa trong suốt bằng cách sử dụng một rgba()giá trị chẳng hạn. Hoạt động trên IE8 +

Nếu bạn sử dụng RGBA cho các trình duyệt hiện đại, bạn không cần để các IE cũ hơn chỉ sử dụng phiên bản không trong suốt của màu đã cho với RGB.

Nếu bạn không thích các giải pháp chỉ CSS, hãy dùng thử CSS3PIE . Với cú pháp này, bạn có thể thấy chính xác cùng một kết quả trong các IE cũ hơn mà bạn thấy trong các trình duyệt hiện đại:

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

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