我不想在CSS中从父继承子不透明度。
我有一个div是父div,在第一个div里面有另一个div是子div。
我想在父div中设置不透明度属性,但我不希望子div继承不透明度属性。
我该怎么做呢?
我不想在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);