我不想从CSS中的父级inheritance孩子的不透明度
我不想从CSS中的父级inheritance孩子的不透明度。
我有一个是父母的div，而我在第一个div里面有另一个div，那是孩子。
我想在父div中设置不透明属性，但我不希望子divinheritance不透明属性。
我怎样才能做到这一点？
使用rgba设置背景色，而不是使用不透明度，其中“a”是透明度级别。
所以，而不是：
background-color: rgb(0,0,255); opacity: 0.5;
使用
background-color: rgba(0,0,255,0.5);
不透明实际上不是在CSS中inheritance的。 这是一个后期渲染组变换。 换句话说，如果一个<div>具有不透明度设置，则将div及其所有孩子渲染到临时缓冲区中，然后将整个缓冲区复合到具有给定不透明度设置的页面中。
你想要做什么取决于你正在寻找的确切的渲染，这是不明确的问题。
正如其他人在这个和其他类似的线程中提到的，避免这个问题的最好方法是使用RGBA / HSLA或者使用透明的PNG。
但是，如果你想要一个荒谬的解决scheme，类似于在这个线程（这也是我的网站）的另一个答案链接，这是一个我写的一个全新的脚本自动修复这个问题，称为thatsNotYoChild.js：
http://www.impressivewebs.com/fixing-parent-child-opacity/
基本上它使用JavaScript来从父div中移除所有的子元素，然后将子元素重新定位到他们应该在的位置，而不再是那个元素的子元素。
对我来说，这应该是最后的手段，但是我认为如果有人想这样做，写这样做会很有趣。
一个小窍门，如果你的父母是透明的，你希望你的孩子是相同的，但专门定义（例如覆盖select下拉的用户代理样式）：
.parent { background-color: rgba(0,0,0,0.5); } .child { background-color: rgba(128,128,128,0); }
子元素的不透明性是从父元素inheritance的。
但是我们可以使用CSS位置属性来完成我们的成就。
文本容器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; }
输出： –
文本不可见，因为从父divinheritance不透明度。
解决scheme——————- >>>>>>
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中
.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>
这个问题没有定义，如果背景是一种颜色或图像，但由于@Blowski已经回答了彩色背景，有一个下面的图像hack：
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 parentinheritance不透明度。
Codepen示例
也许是因为它是无效的标记和浏览器偷偷地分开它们？ 因为来源不显示发生。 我错过了什么吗？
如果您必须使用图像作为透明背景，则可以使用伪元素来解决该问题：
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%; }
我的答案不是关于静态的父子布局，而是关于animation。
我今天正在做一个svg演示，我需要svg内部的div（因为svg是用父母的div宽度和高度创build的，为animation周围的path），这个父div需要在svgpathanimation期间不可见（然后这个div应该是animate opacity from 0 to 1 ，这是最重要的部分）。 而且因为opacity: 0父div opacity: 0隐藏了我的svg，所以我通过visibility选项（具有visibility: visible子节点visibility: visible父节点在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中，使用超时函数删除.invisible类，添加.opacity-zero类，使用诸如whatever.style.top;类的东西来触发布局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
上面的答案似乎很复杂，所以我写了这个：
#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>
用以下recursion的方式将opacity 1.0分配给小孩：
div > div { opacity: 1.0 }
例：
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>
对于其他人试图做一个表（或东西）看起来集中在一行使用不透明度。 就像@Blowski所说的使用颜色不是不透明的。 看看这个小提琴： http : //jsfiddle.net/2en6o43d/
.table:hover > .row:not(:hover)
