仅使用CSS，是否可以使元素的背景半透明，但元素的内容（文本和图像）不透明？
我想在不将文本和背景作为两个独立元素的情况下完成这一点。
尝试时：
p型{位置：绝对；背景色：绿色；过滤器：alpha（不透明度=60）；不透明度：0.6；}跨度{颜色：白色；过滤器：alpha（不透明度=100）；不透明度：1；}<p><span>你好，世界</span></p>
看起来子元素受到其父元素的不透明度的影响，因此不透明度：1相对于父元素的不可见性：0.6。
当前回答
为了使元素的背景半透明，但使元素的内容（文本和图像）不透明，您需要为该图像编写CSS代码，并且必须添加一个名为opacity的最小值属性。
例如
.image {
position: relative;
background-color: cyan;
opacity: 0.7;
}
//值越小，透明度越高，或者值越低，透明度越低。
其他回答
使用半透明PNG或SVG图像或使用CSS：
background-color: rgba(255, 0, 0, 0.5);
这是一篇来自css3.info、Opacity、RGBA和妥协（2007-06-03）的文章。
注意，一旦底层背景穿透，文本仍然需要与背景形成足够的对比。
<p style=“背景色：rgba（255，0，0，0.5）；”><span>你好，世界</span></p>
问题是，在您的示例中，文本实际上是完全不透明的。它在p标记内具有完全不透明性，但p标记只是半透明的。
您可以添加半透明的PNG背景图像，而不是在CSS中实现，或者将文本和div分离为两个元素，并将文本移动到框上（例如，负边距）。
否则就不可能了。
正如Chris所提到的：如果你使用一个具有透明度的PNG文件，你必须使用JavaScript解决方法来让它在烦人的Internet Explorer中工作。。。
这是我能想到的最好的解决方案，不使用CSS 3。据我所知，它在Firefox、Chrome和Internet Explorer上运行得很好。
将一个容器div和两个子div放在同一级别，一个用于内容，另一个用于背景。使用CSS，自动调整背景大小以适应内容，并使用z索引将背景放在后面。
.容器{位置：相对；}.内容{位置：相对；颜色：白色；z指数：5；}.背景{位置：绝对；顶部：0px；左：0px；宽度：100%；高度：100%；背景色：黑色；z指数：1；/*这三行用于所有浏览器中的透明度*/-ms filter：“progid:DXImageTransform.Microsoft.Alpha（不透明度=50）”；过滤器：alpha（不透明度=50）；不透明度：.5；}<div class=“container”><div class=“content”>内容如下。<br/>背景应该适合。</div><div class=“background”></div></div>
CSS 3为您的问题提供了一个简单的解决方案。使用：
background-color:rgba(0, 255, 0, 0.5);
这里，rgba代表红色、绿色、蓝色和alpha值。由于255而获得绿色值，并且通过0.5α值获得半透明度。
最好使用半透明.png。
只需打开Photoshop，创建一个2x2像素的图像（选择1x1可能会导致Internet Explorer错误！），用绿色填充，并将“图层选项卡”中的不透明度设置为60%。然后保存它并使其成为背景图像：
<p style="background: url(green.png);">any text</p>
当然，它很酷，除了在可爱的InternetExplorer6中。有更好的修复方法可用，但这里有一个快速破解方法：
p {
_filter: expression((runtimeStyle.backgroundImage != 'none') ? runtimeStyle.filter = 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src='+currentStyle.backgroundImage.split('\"')[1]+', sizingMethod=scale)' : runtimeStyle.filter,runtimeStyle.backgroundImage = 'none');
}
