我不想在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>

其他回答

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

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

看起来,display: block元素并没有从display: inline父元素继承不透明度。

Codepen例子

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

这个问题没有定义背景是颜色还是图像,但由于@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/HSLA或使用透明的PNG。

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

http://www.impressivewebs.com/fixing-parent-child-opacity/

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

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