我不想在CSS中从父继承子不透明度。
我有一个div是父div，在第一个div里面有另一个div是子div。
我想在父div中设置不透明度属性，但我不希望子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
其他回答
这个问题没有定义背景是颜色还是图像，但由于@Blowski已经回答了彩色背景，下面有一个针对图像的破解方法:
background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');
这样你就可以操纵不透明度的颜色，甚至添加漂亮的渐变效果。
.wrapper { 宽度:630 px; 身高:420 px; 显示:表; 背景:线性渐变( rgba(0, 0, 0, 0。8), rgba(0, 0, 0, 0。8)), url (http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg); ｝ h1 { 显示:表格单元; vertical-align:中间; text-align:中心; 颜色:# fff; ｝ < div class = "包装" > <标题> 5770341 < / h1 >问题 < / div >
不要使用不透明度，使用rgba设置背景颜色，其中“a”是透明度级别。
所以不要:
background-color: rgb(0,0,255); opacity: 0.5;
use
background-color: rgba(0,0,255,0.5);
正如其他人在这篇文章和其他类似的文章中提到的，避免这个问题的最好方法是使用RGBA/HSLA或使用透明的PNG。
但是，如果你想要一个荒谬的解决方案，类似于这个线程(这也是我的网站)中另一个答案中的链接，这里有一个全新的脚本，我写了一个自动修复这个问题，称为thatsNotYoChild.js:
http://www.impressivewebs.com/fixing-parent-child-opacity/
基本上，它使用JavaScript从父div中删除所有子元素，然后将子元素重新定位到它们应该在的位置，而不再是该元素的子元素。
对我来说，这应该是最后的手段，但我认为如果有人想这样做的话，写一些这样的东西会很有趣。
我解决了这个问题，首先创建并保存了一个褪色的图像，然后在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尺寸相同的白色图像。
子元素的不透明度继承自父元素。
但是我们可以使用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
