本问题已经有最佳答案，请猛点这里访问。

我使用类似于以下代码的东西：

Text

我预计这会使背景的不透明度为0.4，文本的不透明度为100％。 相反，它们的不透明度均为0.4。

这是我的解决方案：Text

儿童继承不透明。如果他们不这样做，那就太奇怪了。

您可以将半透明PNG文件用于背景图像，或使用RGBa(用于alpha)颜色作为背景颜色。

例如，50％褪色的黑色背景：

Text added.

可以在此处找到更深入的教程：robertnyman.com/2010/01/11/

是否可以通过单独的css规则设置alpha？

不，它是颜色值的单个通道，颜色值分配给css规则。

@jayarjo rgba(255,255,255,0.6)相当于背景颜色中性淡出。

太好了！ background-color：rgba(0,0,0,0.06)可以转到第二个小数点，以获得更亮的透明度

说"儿童继承不透明"是不正确的。他们没有。只是如果一个孩子包含在具有不透明度的父级中，则该子级将具有不透明度：1，但是父级将其不透明度应用于其自身，包括其所有子级。

@jayarjo HSL会做你想做的事：en.wikipedia.org/wiki/HSL_and_HSV？ CSS将是hsl(a,b,c)或1hsla(a，b，c，z)`。有关CSS着色选项，请参阅w3schools.com/cssref/css_colors_legal.asp。

AlienWebguy，你说"孩子们继承了不透明性。如果他们没有，那就太奇怪了，不方便。"嗯，现在他们做的很奇怪，从Chrome 53开始，所有浏览器都紧随其后。看看这个：bugs.chromium.org/p/chromium/issues/detail?id=646993如果对你很重要，请发表你的意见(在这个问题上，以及在public-fx@w3.org邮件列表中主题[css-transforms])。

这是规格的变化。让我们看看它是如何发挥作用的，以及其他浏览器是否也会效仿。我得到了改变背后的逻辑，但男人几乎每个人都很烦人。

因为什么时候"奇怪而且不方便"被阻止它成为CSS的默认设置？ ：d

请注意，Microsoft浏览器不支持RRGGBBaa表示法：caniuse.com/#feat=css-rrggbbaa但rgba()表示法是。

您可以使用CSS 3 :before来创建半透明背景，只需一个容器就可以完成此操作。使用这样的东西

Text.

然后应用一些CSS

article {

position: relative;

z-index: 1;

}

article::before {

content:"";

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: .4;

z-index: -1;

background: url(path/to/your/image);

}

示例：http：//codepen.io/anon/pen/avdsi

注意：您可能需要调整z-index值。

实际上它确实适用于所有新浏览器和IE 9及更高版本。看看这里的例子

我更喜欢这种解决方案，而不是rgba，因为它适用于图像和背景颜色。

接受的答案是正确的，但这个创造性的解决方案更直接地回答了OP。将背景图像编辑为半透明的png / gif /等等更为正确。不透明度需要更多的渲染效果。

当然，如果您使用的是css3，那么可能支持rgba CSS样式，您不必编写这么多代码。你可以用......替换整个东西......就像一行css一样。

@dudewad OP希望不透明度应用于背景图像。

啊，好吧，我把它误认为是那些老式的透明像素解决方案之一(哎呀)。我取消了我的评论！

虽然@Patrick在我看来是最好的解决方案。无论如何你必须准备好图像，为什么不开始使它透明。在我看来，前端开发人员开始过度自动化，资产管理之类的东西应该在创意端完成。虽然，使用这种解决方案使任何背景透明在某些情况下显然是可取的，所以它的上下文。

这是有效的，但是如果你想通过javascript更改伪元素的背景颜色 - 你将无法，因为它是阴影dom的一部分。

：在规则之前还需要显示：block;如果喜欢我容器：之前已经设置为另一个显示选项(它是我的大部分网站的通用布局，但我把它作为特定页面上的样式块)

可以使用以下方法解决您的问题：

CSS alpha透明度方法(在InternetExplorer8中不起作用)：

#div{background-color:rgba(255,0,0,0.5);}

根据您的选择使用透明的PNG图像作为背景。

使用以下CSS代码段创建跨浏览器Alpha透明背景。以下是#000000 @ 0.4％不透明度的示例

.div {

background:rgb(0,0,0);

background: transparent\9;

background:rgba(0,0,0,0.4);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);

zoom: 1;

}

.div:nth-child(n) {

filter: none;

}

有关此技术的更多详细信息，请参阅此文章，其中包含一个在线CSS生成器。

我称之为正确的解决方案，因为它是跨浏览器解决方案，而不仅仅是新的浏览器。谢谢！

css标记称为background-color而不是background

@Wilt css规则background-color是背景的子规则。 与边框，边距和填充类似，所有背景子规则都可以在一行内设置，而不是单独设置。 在这个实例中使用背景是你想要的，所以你可以覆盖其他背景子规则。

我会做这样的事情

text yay!

CSS：

.container {

position: relative;

}

.container::before {

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

background: url('/path/to/image.png');

opacity: .4;

content:"";

z-index: -1;

}

它应该工作。这假设您需要具有BTW的半透明图像，而不是颜色(您应该使用rgba)。还假设您不能在Photoshop中预先更改图像的不透明度。

你需要在#bgd上设置z-index：-1吗？否则它会使整个事物变得透明

不是z-index，但bgd div元素需要在text元素之前

你可以使用Sass'transparentize。

我发现它是最有用和最简单的。

transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)

transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)

查看更多：#transparentize($ color，$ amount)？萨斯::脚本::值::颜色

.transbg{/* Fallback for web browsers that don't support RGBa */

background-color: rgb(0, 0, 0);

/* RGBa with 0.6 opacity */

background-color: 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)";}

这是因为内部div具有嵌入的div的不透明度的100％(其具有40％的不透明度)。

为了规避它，你可以做一些事情。

您可以创建两个单独的div，如下所示：

为背景设置所需的CSS不透明度和其他属性，并使用z-index属性(z-index)来设置和定位bContent div。有了它，你可以放置背景div的div翻转，而不会有它的不透明度。

另一种选择是RGBa。这将允许您嵌套div并仍然实现div特定的不透明度。

最后一个选项是简单地在所需的图像编辑器中制作所需颜色的半透明.png图像，将background-image属性设置为图像的URL，然后您就不必担心了使用CSS并失去嵌套div结构的功能和组织。

只需确保前景的宽度和高度与背景相同，或者尝试使用顶部，底部，左侧和右侧属性。

.foreground, .background {

position: absolute;

}

.foreground {

z-index: 1;

}

.background {

background-image: url(your/image/here.jpg);

opacity: 0.4;

}