텍스트 자체는 아니지만 텍스트 배경을 투명하게 만들기

그래서 문제가 있습니다. 나는 주위를 둘러 보았지만 운이 없었다. 내 몸의 배경은 투명하게하고 텍스트는 투명하지 않게두고 싶습니다. 지금처럼 나는 계속해서 같은 불투명도를 만듭니다. 내 코드는 다음과 같습니다.

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

여기 내 웹 사이트가 있습니다 (URL에 "tccraft.net"을 입력하지 말고 링크를 클릭하면 페이스 북 페이지로 이동합니다) : http://tccraft.net/index.php 감사합니다!

opacity이를 위해 사용하지 말고 배경을 반투명하게 만들기 위해 배경을 RGBA 값으로 설정하십시오. 귀하의 경우에는 다음과 같습니다.

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

css의 rgba-values에 대한 자세한 정보와 샘플은 http://css-tricks.com/rgba-browser-support/ 를 참조 하십시오 .

완전히 투명한 배경의 경우 :

background: transparent;

그렇지 않으면 반투명 색상 채우기 사용 :

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

값은 다음과 같습니다.

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

그라데이션 배경에 rgba 값을 사용할 수도 있습니다.

이미지 배경의 투명도를 얻으려면 미리 선택한 이미지 편집기에서 이미지의 불투명도를 줄이십시오.

opacity텍스트와 배경을 모두 투명하게 만듭니다. rgba()예를 들어 값을 사용하여 대신 반투명 배경색을 사용하십시오 . IE8 +에서 작동

최신 브라우저에 RGBA를 사용하는 경우 이전 IE가 RGB와 함께 지정된 색상의 불투명 버전 만 사용하도록 할 필요가 없습니다.

CSS 전용 솔루션을 고수하지 않는다면 CSS3PIE 를 사용해보십시오. 이 구문을 사용하면 최신 브라우저에서 볼 수있는 이전 IE에서 정확히 동일한 결과를 볼 수 있습니다.

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

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