如何在父div中设置不透明度而不影响子div？

Question

嘿，我在谷歌搜索，但我不能完善任何完美的答案

我希望父DIV中的不透明度而不是Child DIV

示例

HTML

<div class="parent">
<div class="child">
Hello I am child 
</div>
</div>

的CSS

.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}

注意： - 我希望Parent Div中的背景图片不是颜色

Answer 1

我知道这是旧的，但万一它会帮助别人。

<div style="background-color: rgba(255, 0, 0, 0.5)">child</div> 

rgba的位置：红色，绿色，蓝色和a用于透明度。

Answer 2

如果您在:after伪类中定义 background-image ，可能会很好。写得像这样：

.parent{
    width:300px;
    height:300px;
    position:relative;
    border:1px solid red;
}
.parent:after{
    content:'';
    background:url('http://www.dummyimage.com/300x300/000/fff&text=parent+image');
    width:300px;
    height:300px;
    position:absolute;
    top:0;
    left:0;
    opacity:0.5;
}
.child{
    background:yellow;
    position:relative;
    z-index:1;
}

选中此fiddle

Answer 3

您可以使用伪元素 :( demo on dabblet.com）

您的加价：

<div class="parent">
    <div class="child"> Hello I am child </div>
</div>

<强>的CSS：

.parent{
    position: relative;
}

.parent:before {
    z-index: -1;
    content: '';
    position: absolute;

    opacity: 0.2;
    width: 400px;
    height: 200px;
    background: url('http://img42.imageshack.us/img42/1893/96c75664f7e94f9198ad113.png') no-repeat 0 0; 
}

.child{
    Color:black;
}

Answer 4

如汤姆所说，background-color: rgba(229,229,229, 0.85)可以解决问题。 将它放在父元素的样式上，子元素不会受到影响。

Answer 5

你做不到。 Css今天根本不允许这样做。

逻辑渲染模型就是这个：

  

如果对象是一个容器元素，那么效果就好像容器元素的内容使用掩码在当前背景中混合，其中掩码的每个像素的值都是。

参考：css transparency

解决方案是使用不同的元素组合，通常使用固定或计算位置来定义为当前的孩子：对于作为孩子的用户，它可能在逻辑上和视觉上看起来但是该元素不需要真正你代码中的一个孩子。

使用css的解决方案：fiddle

.parent {
    width:500px;
    height:200px;    
    background-image:url('http://canop.org/blog/wp-content/uploads/2011/11/cropped-bandeau-cr%C3%AAte-011.jpg');
    opacity: 0.2;
}
.child {
    position: fixed;
    top:0;
}

另一种使用javascript的解决方案：fiddle

Answer 6

我遇到了同样的问题，我通过将透明png图像设置为父标记的背景来修复。

This is the 1px x 1px PNG Image that I have created with 60% Opacity of black background！

Answer 7

你不能这样做，除非你把孩子带出父母并通过定位把它放在那里。

我知道并实际运作的唯一方法是使用透明图像（.png具有透明度）作为父母的背景。唯一的缺点是你不能通过CSS控制不透明度，除了它的工作原理！