我不想在CSS中从父继承子不透明度。
我有一个div是父div,在第一个div里面有另一个div是子div。
我想在父div中设置不透明度属性,但我不希望子div继承不透明度属性。
我该怎么做呢?
我不想在CSS中从父继承子不透明度。
我有一个div是父div,在第一个div里面有另一个div是子div。
我想在父div中设置不透明度属性,但我不希望子div继承不透明度属性。
我该怎么做呢?
当前回答
其他人试图使一个表(或其他东西)看起来集中在一行使用不透明度。就像@Blowski说的,使用颜色而不是不透明度。看看这个小提琴:http://jsfiddle.net/2en6o43d/
.table:hover > .row:not(:hover)
其他回答
如果你必须使用一个图像作为透明背景,你可以使用一个伪元素来解决它:
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%;
}
这个问题没有定义背景是颜色还是图像,但由于@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 >
上面的答案对我来说似乎很复杂,所以我写了这个:
#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是你的(不透明度)父母,弹出是你的(不透明度)孩子。它下面的所有内容都是站点的其余部分。
不要使用不透明度,使用rgba设置背景颜色,其中“a”是透明度级别。
所以不要:
background-color: rgb(0,0,255); opacity: 0.5;
use
background-color: rgba(0,0,255,0.5);
不透明度实际上在CSS中并不继承。这是一个渲染后的组转换。换句话说,如果<div>设置了不透明度,则将div及其所有子div渲染到一个临时缓冲区中,然后将整个缓冲区合成到具有给定不透明度设置的页面中。
在这里,您究竟想要做什么取决于您正在寻找的确切渲染,这在问题中是不清楚的。