我不想在CSS中从父继承子不透明度。
我有一个div是父div,在第一个div里面有另一个div是子div。
我想在父div中设置不透明度属性,但我不希望子div继承不透明度属性。
我该怎么做呢?
我不想在CSS中从父继承子不透明度。
我有一个div是父div,在第一个div里面有另一个div是子div。
我想在父div中设置不透明度属性,但我不希望子div继承不透明度属性。
我该怎么做呢?
当前回答
<!--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>
其他回答
如果你必须使用一个图像作为透明背景,你可以使用一个伪元素来解决它:
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%;
}
我解决了这个问题,首先创建并保存了一个褪色的图像,然后在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
正如其他人在这篇文章和其他类似的文章中提到的,避免这个问题的最好方法是使用RGBA/HSLA或使用透明的PNG。
但是,如果你想要一个荒谬的解决方案,类似于这个线程(这也是我的网站)中另一个答案中的链接,这里有一个全新的脚本,我写了一个自动修复这个问题,称为thatsNotYoChild.js:
http://www.impressivewebs.com/fixing-parent-child-opacity/
基本上,它使用JavaScript从父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 >