我不想在CSS中从父继承子不透明度。

我有一个div是父div,在第一个div里面有另一个div是子div。

我想在父div中设置不透明度属性,但我不希望子div继承不透明度属性。

我该怎么做呢?


当前回答

如果你的父类是透明的,并且你希望你的子类是相同的,但是是专门定义的(例如覆盖一个选择下拉菜单的用户代理样式),有一个小技巧:

.parent {
     background-color: rgba(0,0,0,0.5);
}

.child {
     background-color: rgba(128,128,128,0);
}

其他回答

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

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

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

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

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

Codepen例子

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

如果你的父类是透明的,并且你希望你的子类是相同的,但是是专门定义的(例如覆盖一个选择下拉菜单的用户代理样式),有一个小技巧:

.parent {
     background-color: rgba(0,0,0,0.5);
}

.child {
     background-color: rgba(128,128,128,0);
}

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

所以不要:

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

use

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