最简单的方法是用2个div, 1个是背景，1个是文本:

#{容器 位置:相对; 宽度:300 px; 身高:200 px; ｝ #块{ 背景:# CCC; 过滤器:α(不透明度= 60); /* ie */ -moz-opacity: 0.6; /* Mozilla */ 透明度:0.6; /* css3 */ 位置:绝对的; 上图:0; 左:0; 高度:100%; 宽度:100%; ｝ #{文本 位置:绝对的; 上图:0; 左:0; 宽度:100%; 高度:100%; ｝ < div id = "容器" > < div id = "块" > < / div > < div id = " text " > < / div >测试 < / div >

对于任何遇到这个线程的人，这里有一个名为thatsNotYoChild.js的脚本，我刚刚写的，它自动解决了这个问题:

http://www.impressivewebs.com/fixing-parent-child-opacity/

基本上，它将子元素与父元素分离，但将元素保持在页面上相同的物理位置。

最简单的解决方案是创建3个div。一个将包含另外两个，一个有透明背景，一个有内容。使第一个div的位置相对，并设置一个透明背景为负z-index，然后调整内容的位置，以适应透明背景。这样你就不会有绝对定位的问题。

你不能。你必须有一个单独的div作为背景，这样你只能对它应用不透明度。

我最近尝试这样做，因为我已经在使用jQuery，我发现以下是最不麻烦的:

创建两个不同的div。他们会是兄弟姐妹，彼此之间没有羁绊。 给文本div一个纯背景色，因为这将是无javascript的默认值。 使用jQuery获取文本div的高度，并将其应用到背景div。

我相信有一些CSS忍者的方法来做所有这些，只有浮动或其他东西，但我没有耐心去弄清楚。

我的技巧是创建一个透明的。png颜色和使用background:url()。

Use:

background:url("location of image"); // Use an image with opacity

此方法适用于所有浏览器。