我不想在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;
}
其他回答
递归地为子对象分配不透明度1.0:
div > div { opacity: 1.0 }
Example: div.x { opacity: 0.5 } div.x > div.x { opacity: 1.0 } <div style="background-color: #f00; padding:20px;"> <div style="background-color: #0f0; padding:20px;"> <div style="background-color: #00f; padding:20px;"> <div style="background-color: #000; padding:20px; color:#fff"> Example Text - No opacity definition </div> </div> </div> </div> <div style="opacity:0.5; background-color: #f00; padding:20px;"> <div style="opacity:0.5; background-color: #0f0; padding:20px;"> <div style="opacity:0.5; background-color: #00f; padding:20px;"> <div style="opacity:0.5; background-color: #000; padding:20px; color:#fff"> Example Text - 50% opacity inherited </div> </div> </div> </div> <div class="x" style="background-color: #f00; padding:20px;"> <div class="x" style="background-color: #0f0; padding:20px;"> <div class="x" style="background-color: #00f; padding:20px;"> <div class="x" style="background-color: #000; padding:20px; color:#fff"> Example Text - 50% opacity not inherited </div> </div> </div> </div> <div style="opacity: 0.5; background-color: #000; padding:20px; color:#fff"> Example Text - 50% opacity </div>
子元素的不透明度继承自父元素。
但是我们可以使用css的position属性来完成我们的成就。
文本容器div可以放在父div的外面,但是使用绝对定位来突出想要的效果。
理想的要求 ------------------>>>>>>>>>>>>
HTML
<div class="container">
<div class="bar">
<div class="text">The text opacity is inherited from the parent div </div>
</div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
}
输出:——
文本不可见,因为从父div继承了不透明度。
解决方案 ------------------->>>>>>
HTML
<div class="container">
<div class="text">Opacity is not inherited from parent div "bar"</div>
<div class="bar"></div>
</div>
CSS
.container{
position:relative;
}
.bar{
opacity:0.2;
background-color:#000;
z-index:3;
position:absolute;
top:0;
left:0;
}
.text{
color:#fff;
z-index:3;
position:absolute;
top:0;
left:0;
}
输出:
文本是可见的与背景相同的颜色,因为div不在透明div
看起来,display: block元素并没有从display: inline父元素继承不透明度。
Codepen例子
也许是因为它是无效的标记,浏览器正在秘密地分离它们?因为资料没有显示这种情况。我遗漏了什么吗?
我解决了这个问题,首先创建并保存了一个褪色的图像,然后在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尺寸相同的白色图像。
<!--Background opacity--> <style> .container1 { width: 200px; height: 200px; background: rgba(0, 0, 0, .5); margin-bottom: 50px; } </style> <div class="container1"> <div class="box1">Text</div> </div> <!--Before, after, z-index opacity--> <style> .container2 { width: 200px; height: 200px; position: relative; margin-bottom: 100px; } .container2:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: black; opacity: .5; z-index: 1; } .box2 { position: relative; z-index: 2; } </style> <div class="container2"> <div class="box2">Text</div> </div> <!--Outline opacity--> <style> .container3 { width: 200px; height: 200px; outline: 50px solid rgba(0, 0, 0, .5); margin: 50px; } .box3 { position: relative; left: -16px; } </style> <div class="container3"> <div class="box3">Text</div> </div>