仅使用CSS，是否可以使元素的背景半透明，但元素的内容（文本和图像）不透明？
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时：
p型{位置：绝对；背景色：绿色；过滤器：alpha（不透明度=60）；不透明度：0.6；}跨度{颜色：白色；过滤器：alpha（不透明度=100）；不透明度：1；}<p><span>你好，世界</span></p>
看起来子元素受到其父元素的不透明度的影响，因此不透明度：1相对于父元素的不可见性：0.6。
当前回答
我同意以上所有的答案，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;
}
其他回答
CSS 3为您的问题提供了一个简单的解决方案。使用：
background-color:rgba(0, 255, 0, 0.5);
这里，rgba代表红色、绿色、蓝色和alpha值。由于255而获得绿色值，并且通过0.5α值获得半透明度。
您可以通过（ab）使用渐变语法为Internet Explorer 8解决此问题。颜色格式为ARGB。如果使用Sass预处理器，可以使用内置函数“ie-hex-str（）”转换颜色。
background: rgba(0,0,0, 0.5);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#80000000')";
最简单的方法是使用半透明背景PNG图像。
如果需要，可以使用JavaScript使其在InternetExplorer6中工作。
我使用Internet Explorer 6中透明PNG中概述的方法。
除此之外，您可以使用两个并排的兄弟元素来伪装它-使一个半透明，然后将另一个绝对放置在顶部。
不透明度的背景，但不是文本有一些想法。要么使用半透明图像，要么覆盖其他元素。
这给出了所需的结果-
body {
background-image: url("\images\dark-cloud.jpg");
background-size: 100% 100%;
background-attachment: fixed;
opacity: .8;
}
设置背景的不透明度。
