如何使用CSS为文本或图像提供透明背景？
是否有可能仅使用CSS来使元素的background变为半透明，但是元素的内容（文本和图像）是不透明的？
我希望在不将文本和背景作为两个单独元素的情况下完成此任务。
尝试时：
p {
position: absolute;
background-color: green;
filter: alpha(opacity=60);
opacity: 0.6;
}
span {
color: white;
filter: alpha(opacity=100);
opacity: 1;
}<p>
<span>Hello world</span>
</p>使用半透明PNG图像或使用CSS3：
background-color:rgba(255,0,0,0.5);
这是css3.info，Opacity，RGBA和妥协文章（2007-06-03）。
在Firefox 3和Safari 3中，您可以像使用GeorgSchölly所说的那样使用RGBA。
一个鲜为人知的窍门是，你可以在Internet Explorer中使用渐变过滤器。
background-color: rgba(0, 255, 0, 0.5);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#7F00FF00', EndColorStr='#7F00FF00');
第一个十六进制数字定义了颜色的alpha值。
全面解决所有浏览器：
.alpha60 {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 0, 0) transparent;
/* RGBa with 0.6 opacity */
background: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
这是通过CSS背景透明度而不影响子元素，通过RGBa和过滤器。
结果的屏幕截图：
这是使用下面的代码时：
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<style type="text/css" media="all">
.transparent-background-with-text-and-images-on-top {
background: rgb(0, 0, 0) transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.6); /* RGBa with 0.6 opacity */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000); /* For IE 5.5 - 7*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)"; /* For IE 8*/
}
</style>
</head>
<body>
<div class="transparent-background-with-text-and-images-on-top">
<p>Here some content (text AND images) "on top of the transparent background"</p>
<img src="http://i.imgur.com/LnnghmF.gif">
</div>
</body>
</html>
这是我可以想出的最好的解决方案，不使用CSS 3.就我所见，它在Firefox，Chrome和Internet Explorer上运行良好。
将容器DIV和两个子DIV放在同一个级别，一个用于内容，一个用于背景。 使用CSS，自动调整背景大小以适应内容，并使用z-index将背景放在后面。
.container {
position: relative;
}
.content {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
/* These three lines are for transparency in all browsers. */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
opacity: .5;
}<div class="container">
<div class="content">
Here is the content.
<br />Background should grow to fit.
</div>
<div class="background"></div>
</div>上一篇: How do I give text or an image a transparent background using CSS?