如何设置不透明度父DIV和子DIV没有影响？ [重复] 如何设置不透明度父DIV和子DIV没有影

这个问题已经在这里有一个答案：

我不想继承父孩子不透明度在CSS 14个回答

嘿，我正在寻找在谷歌，但我不能罚款任何完美的答案

我想不透明度父DIV而不是儿童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:

可能是，如果你在定义背景图片这是很好的:after伪类。像这样写：

.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;
}

检查这个小提琴

Answer 2:

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

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

其中rgba是：红，绿，蓝， a是透明度。

Answer 3:

你可以用伪元素做到这一点 ：（上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透明度

该解决方案是使用一个不同的元素组成，通常采用什么今天定义为一个孩子固定的或计算的位置：它可以在逻辑上和visualy出现用户作为一个孩子，但该元素并不需要真正的孩子你的代码。

使用CSS：A液小提琴

.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另一种解决方案：小提琴