仅使用CSS，是否可以使元素的背景半透明，但元素的内容（文本和图像）不透明？
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时：
p型{位置：绝对；背景色：绿色；过滤器：alpha（不透明度=60）；不透明度：0.6；}跨度{颜色：白色；过滤器：alpha（不透明度=100）；不透明度：1；}<p><span>你好，世界</span></p>
看起来子元素受到其父元素的不透明度的影响，因此不透明度：1相对于父元素的不可见性：0.6。
当前回答
在Firefox 3和Safari 3中，您可以像Georg Schö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)";
}
这是通过RGBa和过滤器在不影响子元素的情况下实现CSS背景透明度。
结果截图证明：
这是在使用以下代码时：
<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>
其他回答
如果你使用的是Less，你可以使用褪色（颜色，30%）。
CSS 3为您的问题提供了一个简单的解决方案。使用：
background-color:rgba(0, 255, 0, 0.5);
这里，rgba代表红色、绿色、蓝色和alpha值。由于255而获得绿色值，并且通过0.5α值获得半透明度。
这里有一个jQuery插件Transify（Transify-一个jQueryplugin，可以轻松地将透明度/不透明度应用于元素的背景），它可以为您处理所有事情。
我时不时地遇到这个问题，所以我决定写一些能让生活更轻松的东西。该脚本小于2KB，只需要一行代码就可以运行，如果您愿意，它还可以处理背景的不透明度动画。
有一个技巧可以最小化标记：使用伪元素作为背景，可以在不影响主元素及其子元素的情况下设置其不透明度：
DEMO
输出：
相关代码：
p型{位置：相对；}p： 之后{内容：“”；位置：绝对；顶部：0；左：0；宽度：100%；高度：100%；背景：#fff；-ms filter：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；不透明度：.6；z指数：-1；}/***以下仅适用于演示样式***/正文{背景：url（'http://i.imgur.com/k8BtMvj.jpg'）不重复；背景尺寸：封面；}p型{宽度：50%；填充：1em；保证金：10%自动；字体系列：arial，serif；颜色：#000；}国际货币基金组织{显示：块；最大宽度：90%；边距：.6em自动；}<p>Lorem ipsum dolor坐amet，consectetur adipiscing elit。不要用舌头骚扰。<img src=“http://i.imgur.com/hPLqUtN.jpg“alt=”“/></p>
浏览器支持Internet Explorer 8和更高版本。
伪元素不透明度
该方法允许您在背景中显示图像，而不仅仅是纯色，还可以用于在其他属性（如边界）上显示透明度。不需要透明PNG图像。
在CSS中使用：before（或：after），并赋予它们不透明度值，使元素保持其原始不透明度。因此，您可以使用：before来创建一个人造元素，并为其提供所需的透明背景（或边框），然后将其移动到您希望使用z索引保持不透明的内容后面。
一个例子（fiddle）（注意，带有类dad的DIV只是为了提供一些上下文和与颜色的对比，实际上不需要这个额外的元素，红色矩形向下移动一点并向右移动，以便在fancyBg元素后面留下可见的背景）：
<div class="dad">
<div class="fancyBg">
Test text that should have solid text color lets see if we can manage it without extra elements
</div>
</div>
使用此CSS：
.dad {
background: lime; border: 1px double black; margin: 1ex 2ex;
padding: 0.5ex; position: relative; -k-z-index: 5;
}
.fancyBg {
border: 1px dashed black; position: relative; color: white; font-weight: bold;
z-index: 0; /*background: black;*/
}
.fancyBg:before {content:'-'; display: block;
position: absolute; background: red; opacity: .5;
top: 2ex; right: -2ex; bottom: -2ex; left: 2ex;
/*top: 0; right: 0; bottom: 0; left: 0;*/
z-index: -1;
}
在本例中，.fancyBg:before具有您想要的具有透明度的CSS财产（本例中为红色背景，但可以是图像或边框）。它被定位为绝对的，以便将其移到.faceyBg后面（使用零值或更适合您需要的任何值）。
