不透明度实际上在CSS中并不继承。这是一个渲染后的组转换。换句话说，如果<div>设置了不透明度，则将div及其所有子div渲染到一个临时缓冲区中，然后将整个缓冲区合成到具有给定不透明度设置的页面中。

在这里，您究竟想要做什么取决于您正在寻找的确切渲染，这在问题中是不清楚的。

不要使用不透明度，使用rgba设置背景颜色，其中“a”是透明度级别。

所以不要:

background-color: rgb(0,0,255); opacity: 0.5;

use

background-color: rgba(0,0,255,0.5);

我解决了这个问题，首先创建并保存了一个褪色的图像，然后在css背景中使用。我使用以下python代码:

from PLI import Image
bg = Image.open('im1.jpg')
fg = Image.open('im2.jpg')
#blend at ratio .3
Image.blend(bg,fg,.3).save('out.jpg')

在这里，im1.jpg只是一个与im2.jpg尺寸相同的白色图像。

这个问题没有定义背景是颜色还是图像，但由于@Blowski已经回答了彩色背景，下面有一个针对图像的破解方法:

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');

这样你就可以操纵不透明度的颜色，甚至添加漂亮的渐变效果。

.wrapper { 宽度:630 px; 身高:420 px; 显示:表; 背景:线性渐变( rgba(0, 0, 0, 0。8), rgba(0, 0, 0, 0。8)), url (http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg); ｝ h1 { 显示:表格单元; vertical-align:中间; text-align:中心; 颜色:# fff; ｝ < div class = "包装" > <标题> 5770341 < / h1 >问题 < / div >

看起来，display: block元素并没有从display: inline父元素继承不透明度。

Codepen例子

也许是因为它是无效的标记，浏览器正在秘密地分离它们?因为资料没有显示这种情况。我遗漏了什么吗?

其他人试图使一个表(或其他东西)看起来集中在一行使用不透明度。就像@Blowski说的，使用颜色而不是不透明度。看看这个小提琴:http://jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover)