我不想在CSS中从父继承子不透明度

我不想在CSS中从父继承子不透明度。

我有一个div是父div，在第一个div里面有另一个div是子div。

我想在父div中设置不透明度属性，但我不希望子div继承不透明度属性。

我该怎么做呢?

258533 次浏览
小开

不要使用不透明度，使用rgba设置背景颜色，其中“a”是透明度级别。

所以不要:

background-color: rgb(0,0,255); opacity: 0.5;

使用

background-color: rgba(0,0,255,0.5);
小开

不透明度实际上在CSS中并不继承。这是一个渲染后的组转换。换句话说，如果<div>设置了不透明度，则将div及其所有子元素呈现到一个临时缓冲区中，然后将整个缓冲区合成到具有给定不透明度设置的页面中。

在这里，您究竟想要做什么取决于您正在寻找的确切渲染，这在问题中是不清楚的。

小开

正如其他人在这篇文章和其他类似的文章中提到的，避免这个问题的最好方法是使用RGBA/HSLA或使用透明的PNG。

但是，如果你想要一个荒谬的解决方案，类似于这个线程(这也是我的网站)中另一个答案中的链接，这里有一个全新的脚本，我写了一个自动修复这个问题，称为thatsNotYoChild.js:

http://www.impressivewebs.com/fixing-parent-child-opacity/ < a href = " http://www.impressivewebs.com/fixing-parent-child-opacity/ " > < / >

基本上，它使用JavaScript从父div中删除所有子元素，然后将子元素重新定位到它们应该在的位置，而不再是该元素的子元素。

对我来说，这应该是最后的手段，但我认为如果有人想这样做的话，写一些这样的东西会很有趣。

小开

如果你必须使用一个图像作为透明背景，你可以使用一个伪元素来解决它:

超文本标记语言

<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%;
}
小开

其他人试图使一个表(或其他东西)看起来集中在一行使用不透明度。就像@Blowski说的，使用颜色而不是不透明度。看看这个小提琴:http://jsfiddle.net/2en6o43d/

.table:hover > .row:not(:hover)
小开

我的答案不是关于静态的父子布局，而是关于动画。

我今天做了一个svg演示，我需要svg在div内部(因为svg是用父div的宽度和高度创建的，以动画路径)，并且这个父div需要在svg路径动画期间不可见(然后这个div应该animate opacity from 0 to 1，这是最重要的部分)。并且因为带有opacity: 0的父div隐藏了我的svg，我遇到了这个带有visibility选项的hack(带有visibility: visible的子div可以在带有visibility: hidden的父div中看到):

.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类，添加.opacity-zero类，用类似whatever.style.top;的东西触发布局，并删除.opacity-zero类。

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

小开

子元素的不透明度继承自父元素。

但是我们可以使用css的position属性来完成我们的成就。

文本容器div可以放在父div的外面，但是使用绝对定位来突出想要的效果。

理想的要求 ------------------>>>>>>>>>>>>

超文本标记语言

            <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;


}

输出:——

继承了文本的不透明度(文本的颜色是#000;但不可见。)

文本不可见，因为从父div继承了不透明度。

解决方案 ------------------->>>>>>

超文本标记语言

       <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;
}

输出:

Not Inherited

文本是可见的与背景相同的颜色，因为div不在透明div

小开

这个问题没有定义背景是颜色还是图像，但由于@Blowski已经回答了彩色背景，下面有一个针对图像的破解方法:

background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,.6)), url('image.jpg');

这样你就可以操纵不透明度的颜色，甚至添加漂亮的渐变效果。

. 
.wrapper {
width: 630px;
height: 420px;
display: table;
background: linear-gradient(
rgba(0,0,0,.8),
rgba(0,0,0,.8)),
url('http://cdn.moviestillsdb.com/sm/35bc3c6a2b791425de6caf8b9391026e/rambo-iii.jpg');
}


h1 {
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}
<div class="wrapper">
<h1>Question 5770341</h1>
</div>

小开

似乎display: block元素没有从display: inline父元素继承不透明度。

< a href = " http://codepen。io/andrewtibbetts/pen/VawXEw" rel="nofollow">代码示例 . io/andrewtibbetts/pen/VawXEw" rel="nofollow">

也许是因为它是无效的标记，浏览器正在秘密地分离它们?因为资料没有显示这种情况。我遗漏了什么吗?

小开

上面的答案对我来说似乎很复杂，所以我写了这个:

. 
#kb-mask-overlay {
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
z-index: 10000;
top: 0;
left: 0;
position: fixed;
content: "";
}


#kb-mask-overlay > .pop-up {
width: 800px;
height: 150px;
background-color: dimgray;
margin-top: 30px;
margin-left: 30px;
}


span {
color: white;
}
<div id="kb-mask-overlay">
<div class="pop-up">
<span>Content of no opacity children</span>
</div>
</div>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae arcu nec velit pharetra consequat a quis sem. Vestibulum rutrum, ligula nec aliquam suscipit, sem justo accumsan mauris, id iaculis mauris arcu a eros. Donec sem urna, posuere id felis eget, pharetra rhoncus felis. Mauris tellus metus, rhoncus et laoreet sed, dictum nec orci. Mauris sagittis et nisl vitae aliquet. Sed vestibulum at orci ut tempor. Ut tristique vel erat sed efficitur. Vivamus vestibulum velit condimentum tristique lacinia. Sed dignissim iaculis mattis. Sed eu ligula felis. Mauris diam augue, rhoncus sed interdum nec, euismod eget urna.


Morbi sem arcu, sollicitudin ut euismod ac, iaculis id dolor. Praesent ultricies eu massa eget varius. Nunc sit amet egestas arcu. Quisque at turpis lobortis nibh semper imperdiet vitae a neque. Proin maximus laoreet luctus. Nulla vel nulla ut elit blandit consequat. Nullam tempus purus vitae luctus fringilla. Nullam sodales vel justo vitae eleifend. Suspendisse et tortor nulla. Ut pharetra, sapien non porttitor pharetra, libero augue dictum purus, dignissim vehicula ligula nulla sed purus. Cras nec dapibus dolor. Donec nulla arcu, pretium ac ipsum vel, accumsan egestas urna. Vestibulum at bibendum tortor, a consequat eros. Nunc interdum at erat nec ultrices. Sed a augue sit amet lacus sodales eleifend ut id metus. Quisque vel luctus arcu.
</p>
</div>

kb-mask-overlay是你的(不透明)父母，pop-up是你的(不透明)孩子。它下面的所有内容都是站点的其余部分。

小开

如果你的父类是透明的，并且你希望你的子类是相同的，但是是专门定义的(例如覆盖一个选择下拉菜单的用户代理样式)，有一个小技巧:

.parent {
background-color: rgba(0,0,0,0.5);
}


.child {
background-color: rgba(128,128,128,0);
}
小开

递归地为子对象分配不透明度1.0:

div > div { opacity: 1.0 }
< p >的例子: 
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>

小开

没有放之四海而皆准的方法，但我发现有一件事特别有用，那就是为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的颜色不透明度

小开

在mac你可以使用预览编辑器在你的。png图像上应用不透明度的白色矩形，然后你把它放在你的。css。

1)图像
标志

2)在图像周围创建一个矩形
矩形周围的标志

3)改变背景颜色为白色
矩形变白

4)调整矩形不透明度
不透明的图片

小开

以下是对我有用的:

  1. 改变了

来自:

opacity: 0.52;
background-color: #7c7c7c;

:

opacity: 1 !important;
background-color: rgba(124, 124, 124, 0.52) !important;

将hex & opacity转换为rgba，
使用http://hex2rgba.devoth.com/

这样的网站
小开

我解决了这个问题，首先创建并保存了一个褪色的图像，然后在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>

小开
我也面临着同样的问题，在谷歌了一些之后，我找到了这个问题的一些解决方案(3种方法)。 我在这里分享解决方案，你可以尝试其中任何一个 < p >选项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;
}
< p >选项2: 使用带有alpha值的rgba颜色，而不是不透明度 
 <div id="parentContainer" style="background: rgba(255,255,255,0.6);">
<div id="childContent">
Content ...
</div>
</div>
< p >选项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;
}

提交答案