我不想在CSS中从父继承子不透明度。
我有一个div是父div,在第一个div里面有另一个div是子div。
我想在父div中设置不透明度属性,但我不希望子div继承不透明度属性。
我该怎么做呢?
我不想在CSS中从父继承子不透明度。
我有一个div是父div,在第一个div里面有另一个div是子div。
我想在父div中设置不透明度属性,但我不希望子div继承不透明度属性。
我该怎么做呢?
当前回答
我也遇到了同样的问题,在谷歌了一下之后,我找到了一些解决这个问题的方法(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;
}
其他回答
我解决了这个问题,首先创建并保存了一个褪色的图像,然后在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尺寸相同的白色图像。
我的答案不是关于静态的父子布局,而是关于动画。
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
不要使用不透明度,使用rgba设置背景颜色,其中“a”是透明度级别。
所以不要:
background-color: rgb(0,0,255); opacity: 0.5;
use
background-color: rgba(0,0,255,0.5);
没有放之四海而皆准的方法,但我发现有一件事特别有用,那就是为div的直接子div设置不透明度,除非你想保持完全可见。在代码:
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
<div class="child3"></div>
<div class="child4"></div>
</div>
和css:
div.parent > div:not(.child1){
opacity: 0.5;
}
如果你有背景颜色/图片在父文件上,你可以通过应用alpha过滤器来修复rgba和background-image的颜色不透明度
如果你必须使用一个图像作为透明背景,你可以使用一个伪元素来解决它:
html
<div class="wrap">
<p>I have 100% opacity</p>
</div>
css
.wrap, .wrap > * {
position: relative;
}
.wrap:before {
content: " ";
opacity: 0.2;
background: url("http://placehold.it/100x100/FF0000") repeat;
position: absolute;
width: 100%;
height: 100%;
}