我不想在CSS中从父继承子不透明度。
我有一个div是父div，在第一个div里面有另一个div是子div。
我想在父div中设置不透明度属性，但我不希望子div继承不透明度属性。
我该怎么做呢?
当前回答
我的答案不是关于静态的父子布局，而是关于动画。
I was doing an svg demo today, and i needed svg to be inside div (because svg is created with parent's div width and height, to animate the path around), and this parent div needed to be invisible during svg path animation (and then this div was supposed to animate opacity from 0 to 1, it's the most important part). And because parent div with opacity: 0 was hiding my svg, i came across this hack with visibility option (child with visibility: visible can be seen inside parent with visibility: hidden):
.main.invisible .test {
visibility: hidden;
}
.main.opacity-zero .test {
opacity: 0;
transition: opacity 0s !important;
}
.test { // parent div
transition: opacity 1s;
}
.test-svg { // child svg
visibility: visible;
}
然后，在js中，你用timeout函数删除。invisible类，添加。opaque -zero类，用。style。top之类的东西触发布局;并删除。opaque - 0类。
var $main = $(".main");
setTimeout(function() {
$main.addClass('opacity-zero').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);
最好检查这个演示http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011
其他回答
以下是对我有用的:
改变了
来自:
opacity: 0.52;
background-color: #7c7c7c;
To:
opacity: 1 !important;
background-color: rgba(124, 124, 124, 0.52) !important;
要将十六进制和不透明度转换为rgba， 使用http://hex2rgba.devoth.com/这样的网站
看起来，display: block元素并没有从display: inline父元素继承不透明度。
Codepen例子
也许是因为它是无效的标记，浏览器正在秘密地分离它们?因为资料没有显示这种情况。我遗漏了什么吗?
我的答案不是关于静态的父子布局，而是关于动画。
I was doing an svg demo today, and i needed svg to be inside div (because svg is created with parent's div width and height, to animate the path around), and this parent div needed to be invisible during svg path animation (and then this div was supposed to animate opacity from 0 to 1, it's the most important part). And because parent div with opacity: 0 was hiding my svg, i came across this hack with visibility option (child with visibility: visible can be seen inside parent with visibility: hidden):
.main.invisible .test {
visibility: hidden;
}
.main.opacity-zero .test {
opacity: 0;
transition: opacity 0s !important;
}
.test { // parent div
transition: opacity 1s;
}
.test-svg { // child svg
visibility: visible;
}
然后，在js中，你用timeout函数删除。invisible类，添加。opaque -zero类，用。style。top之类的东西触发布局;并删除。opaque - 0类。
var $main = $(".main");
setTimeout(function() {
$main.addClass('opacity-zero').removeClass("invisible");
$(".test-svg").hide();
$main.css("top");
$main.removeClass("opacity-zero");
}, 3000);
最好检查这个演示http://codepen.io/suez/pen/54bbb2f09e8d7680da1af2faa29a0aef?editors=011
如果你的父类是透明的，并且你希望你的子类是相同的，但是是专门定义的(例如覆盖一个选择下拉菜单的用户代理样式)，有一个小技巧:
.parent {
background-color: rgba(0,0,0,0.5);
}
.child {
background-color: rgba(128,128,128,0);
}
我也遇到了同样的问题，在谷歌了一下之后，我找到了一些解决这个问题的方法(3种方法)。 我在这里分享解决方案，你可以尝试其中任何一种。
选项1: 在之前或之后使用伪标记元素作为背景
.parentContainer {
position: relative;
}
.parentContainer:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
opacity: 0.6;
}
.childContent {
position: relative;
color: red;
z-index: 1;
}
选项2: 使用带有alpha值的rgba颜色而不是不透明度。
<div id="parentContainer" style="background: rgba(255,255,255,0.6);">
<div id="childContent">
Content ...
</div>
</div>
选项3: 使用背景div，一个元素的绝对位置高于另一个元素。
<div class="parentContainer">
<div class="childContent">
Here is the content.
</div>
<div class="background"></div>
</div>
.parentContainer {
position: relative;
}
.childContent {
position: relative;
color: White;
z-index: 5;
}
.background {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: Black;
z-index: 1;
opacity: .5;
}
