HTML/CSS 文本背景透明但文本不透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15449280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML/CSS text background transparent but text not
提问by tec4
So I am having a problem. I have looked around and looked around but no luck. I would like to make the background of my body transparent but leave the text non transparent. As it is right now I keep making both the same opacity. Here is my code:
所以我遇到了问题。我环顾四周，环顾四周，但没有运气。我想让我的身体背景透明，但让文本不透明。就像现在一样，我一直保持相同的不透明度。这是我的代码：
@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;
}
Here is my website (click the link dont type "tccraft.net" in your url it will take you to a facebook page): http://tccraft.net/index.phpThank you!
这是我的网站（点击链接，不要在你的网址中输入“tccraft.net”，它会带你到 Facebook 页面）：http://tccraft.net/index.php 谢谢！
回答by Karl-Johan Sj?gren
Don't use opacityfor this, set the background to an RGBA-value instead to only make the background semi-transparent. In your case it would be like this.
不要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);
}
See http://css-tricks.com/rgba-browser-support/for more info and samples of rgba-values in css.
有关css 中 rgba 值的更多信息和示例，请参阅http://css-tricks.com/rgba-browser-support/。
回答by James Coyle
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.
您还可以将 rgba 值用于渐变背景。
To get transparency on an image background simply reduce the opacity of the image in an image editor of you choice beforehand.
要获得图像背景的透明度，只需事先在您选择的图像编辑器中降低图像的不透明度。
回答by FelipeAls
opacitywill make both text and background transparent. Use a semi-transparent background-color instead, by using a rgba()value for example. Works on IE8+
opacity将使文本和背景都透明。改用半透明的背景色，rgba()例如使用一个值。适用于 IE8+
回答by BL_
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.
如果您在现代浏览器中使用 RGBA，则不需要让较旧的 IE 仅使用具有 RGB 的给定颜色的非透明版本。
If you don't stick to CSS-only solutions, give CSS3PIEa try. With this syntax you can see exactly the same result in older IEs that you see in modern browsers:
如果您不坚持仅使用 CSS 的解决方案，请尝试使用CSS3PIE。使用此语法，您可以在较旧的 IE 中看到与在现代浏览器中看到的完全相同的结果：
div {
-pie-background: rgba(223,231,233,0.8);
behavior: url(../PIE.htc);
}
回答by trulyignitin
box-shadow: inset 1px 2000px rgba(208, 208, 208, 0.54);
