使文本背景透明，但文本本身不透明

所以我有个问题。我到处找了又找，没找到。我想使我的身体的背景透明，但留下的文字不透明。就像现在一样，我一直在做同样的不透明度。这是我的代码:

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

这是我的网站(点击链接，不要在你的网址中键入“ tccraft.net”，它会带你到一个 facebook 页面) < a href = “ http://tccraft.net/index.php”rel = “ norefrer”> http://tccraft.net/index.php 谢谢！

241434 次浏览
小开
最佳答案

Don't use opacity for this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this.

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

See http://css-tricks.com/rgba-browser-support/ for more info and samples of rgba-values in css.

小开

For a fully transparent background use: 

background: transparent;

Otherwise for a semi-transparent color fill use: 

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

where the values are:

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

You can also use rgba values for gradient backgrounds.

To get transparency on an image background simply reduce the opacity of the image in an image editor of you choice beforehand.

小开

opacity will make both text and background transparent. Use a semi-transparent background-color instead, by using a rgba() value for example. Works on IE8+

小开

If you use RGBA for modern browsers you don't need let older IEs use only the non-transparent version of the given color with RGB.

If you don't stick to CSS-only solutions, give CSS3PIE a try. With this syntax you can see exactly the same result in older IEs that you see in modern browsers:

div {
-pie-background: rgba(223,231,233,0.8);
behavior: url(../PIE.htc);
}
小开 
box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.54);
小开

To make the background of your body transparent please try this style, it worked for me, add "ad" at the end of your desired color code

background-color: #42413Cad !important;
小开

I would add Hex color code for transparency

background-color: #42413C+hexcode

https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4 It would be somethin like this:

background-color: #42413C2E

It is equal to that color + 18% alpha

小开

I found a way with z-index.

The watermark class (you can use an example from #19531361) does the job. All input tags are non transparent, but they sit "behind" the watermark. To make them active, use following css modifications (inputs are then "on top").

input {
position:relative;
z-index:10;
}


.watermark {
position: absolute;
opacity: 25%;
z-index:0;
}
小开

Use alpha value instead of using opacity. See code below:

background: rgba(255,255,255,0.2);

提交答案