仅使用CSS，是否可以使元素的背景半透明，但元素的内容（文本和图像）不透明？
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时：
p型{位置：绝对；背景色：绿色；过滤器：alpha（不透明度=60）；不透明度：0.6；}跨度{颜色：白色；过滤器：alpha（不透明度=100）；不透明度：1；}<p><span>你好，世界</span></p>
看起来子元素受到其父元素的不透明度的影响，因此不透明度：1相对于父元素的不可见性：0.6。
当前回答
<div align="center" style="width:100%;height:100%;background:white;opacity:0.5;position:absolute;z-index:1001">
<img id="search_img" style="margin-top:20%;" src="../resources/images/loading_small.gif">
</div>
http://jsfiddle.net/x2ukko7u/?
其他回答
这给出了所需的结果-
body {
background-image: url("\images\dark-cloud.jpg");
background-size: 100% 100%;
background-attachment: fixed;
opacity: .8;
}
设置背景的不透明度。
背景色：rgba（255，0，0，0.5）；如上所述，简单地说就是最好的答案。即使在2013年，使用CSS3也不简单，因为不同浏览器的支持水平会随着每次迭代而变化。
虽然所有主要浏览器都支持背景色（CSS 3并不陌生）[1]，但alpha透明度可能很棘手，尤其是在版本9之前的Internet Explorer以及版本5.1之前的Safari浏览器上的边框颜色。[2]
使用Compass或SASS这样的工具确实有助于生产和跨平台兼容性。
[1] W3Schools:CSS背景色属性
[2] Norman的博客：浏览器支持清单CSS3（2012年10月）
我认为这将为您提供所需的输出：
div {
width: 200px;
height: 200px;
display: block;
position: relative;
}
div::after {
content: "";
background: url(image.jpg);
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
我同意以上所有的答案，rgba是正确的选择。在我的例子中，我以编程方式提供了一个十六进制背景，因此我必须基于十六进制代码生成自己的rgba。我创建了唐先生答案的修改版本，将十六进制转换为rgba
function hexToRgba(hex,alpha) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
if(result!=null){
const r = parseInt(result[1], 16);
const g = parseInt(result[2], 16);
const b = parseInt(result[3], 16);
//
return `rgba(${r},${g},${b},${alpha})`;
}
return null;
}
在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>
