仅使用CSS，是否可以使元素的背景半透明，但元素的内容（文本和图像）不透明？
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时：
p型{位置：绝对；背景色：绿色；过滤器：alpha（不透明度=60）；不透明度：0.6；}跨度{颜色：白色；过滤器：alpha（不透明度=100）；不透明度：1；}<p><span>你好，世界</span></p>
看起来子元素受到其父元素的不透明度的影响，因此不透明度：1相对于父元素的不可见性：0.6。
当前回答
背景色：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。给它一个类/id。将其留空，然后将其关闭。为其设置高度和宽度（例如，300像素乘300像素）。给它一个0.5的不透明度或任何你喜欢的颜色，以及一个背景色。
然后，在该div的正下方，创建另一个具有不同类/id的div。在其中创建一个段落，在其中放置文本。给出div位置：relative，top：-295px（即负295像素）。给它一个z索引为2，以便于度量，并确保它的不透明度为1。根据您的喜好设置段落的样式，但要确保尺寸小于第一个div的尺寸，这样它就不会溢出。
就是这样。代码如下：
.反式{不透明度：0.5；高度：300px；宽度：300px；背景色：橙色；}.变速器2{不透明度：1；位置：相对；顶部：-295px；}.变速器2 p{宽度：295px；颜色：黑色；字号：粗体；}<body><div class=“trans”></div><div class=“trans2”><p>文本文本文本</p></div></body>
这在Safari2.x中有效，但我不了解Internet Explorer。
可以使用附加到十六进制值的不透明度值：
background-color: #11ffeeaa;
在本例中，aa是不透明度。不透明度为00表示透明，ff表示纯色。
不透明度是可选的，因此可以一如既往地使用十六进制值：
background-color: #11ffee;
您也可以使用rgba（）的旧方法：
background-color: rgba(117, 190, 218, 0.5);
如果您想确保背景没有其他样式，如图像或渐变，请使用背景速记：
background: #11ffeeaa;
根据Mozilla规范(https://developer.mozilla.org/en-US/docs/Web/CSS/background-color):
/* Keyword values */
background-color: red;
background-color: indigo;
/* Hexadecimal value */
background-color: #bbff00; /* Fully opaque */
background-color: #bf0; /* Fully opaque shorthand */
background-color: #11ffee00; /* Fully transparent */
background-color: #1fe0; /* Fully transparent shorthand */
background-color: #11ffeeff; /* Fully opaque */
background-color: #1fef; /* Fully opaque shorthand */
/* RGB value */
background-color: rgb(255, 255, 128); /* Fully opaque */
background-color: rgba(117, 190, 218, 0.5); /* 50% transparent */
/* HSL value */
background-color: hsl(50, 33%, 25%); /* Fully opaque */
background-color: hsla(50, 33%, 25%, 0.75); /* 75% transparent */
/* Special keyword values */
background-color: currentcolor;
background-color: transparent;
/* Global values */
background-color: inherit;
background-color: initial;
background-color: unset;
最简单的方法是使用半透明背景PNG图像。
如果需要，可以使用JavaScript使其在InternetExplorer6中工作。
我使用Internet Explorer 6中透明PNG中概述的方法。
除此之外，您可以使用两个并排的兄弟元素来伪装它-使一个半透明，然后将另一个绝对放置在顶部。
不透明度的背景，但不是文本有一些想法。要么使用半透明图像，要么覆盖其他元素。
我同意以上所有的答案，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;
}
