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

嘿，我正在寻找在谷歌，但我不能罚款任何完美的答案如何在父div中设置不透明度而不影响子div？

我想不透明度父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不变色

来源

2012-06-04 Rohit Azad

嗨@DavidThomas如果你可以说这个问题是重复的，如果你有任何答案在这个问题没有使用位置和用于纯CSS背景图像在父div ............ –

预编辑它似乎是;我在移动设备上阅读了这个问题，然后为了找到重复内容，我切换到桌面。我之间没有重读过你的问题。不过，我的近距离投票会消失，所以不要担心。 –

如果你在: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

来源

2012-06-04 10:07:50 sandeep

我的答案是非常类似于你的，但我不能imageine我的问题 –

@sandeep谢谢你的确切答案，我们完全困惑在这个错误......感谢哥们。 ..... –

@VladimirStarkov当我给我的答案，我没有看到你的答案:) – sandeep

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

逻辑渲染模型是这样的一种：

如果对象是一个容器元素，则该效果是因为如果容器元件的内容物对当前背景使用掩模，其中值混合每个像素的面具是。

参考：css transparency

的解决方案是使用一个不同的元素组合物，通常使用用于今天所定义为一个子固定的或计算的位置：其可以在逻辑上和visualy出现对于用户作为子但是元素并不需要是代码中真正的孩子。

一个解决方案使用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

来源

2012-06-04 09:29:00

谢谢，但这只是背景颜色相关的不是背景图片............. –

图片也是一样的。 –

可以给我一些例子jsfiddle.net –

你不能这样做，除非你带着孩子离开父母，并通过定位放置。

我知道的唯一方法和它的实际工作，是使用一个半透明的图像（PNG与透明度）父母的背景。唯一的缺点是你不能通过CSS控制不透明度，除此之外它是可行的！

来源

2012-06-04 09:43:30 jackJoe

为什么负面？ – jackJoe

您可以与伪元素做：（demo on dabblet.com） enter image description here

您的标记：

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

来源

2012-06-04 09:55:58

嘿@Vlamimir starkov我不使用位置............... –

@RohitAzad为什么这么大？ –

+1对于你的答案你也接近我的要求其实你没有定义在你父母的宽度高度，所以这就是为什么我有点困惑在你的旁边byw谢谢....... –

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

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

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

来源

2013-01-25 16:04:12 PaulSatcom

... AAAND它不会影响孩子div的（只是一个快速注）内的其他背景颜色 – CularBytes

增加一个硬编码的内嵌式是错误的，请不要分享。 – Ofear

我有同样的问题，我通过设置透明png图像作为父标记的背景进行了修复。

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

来源

2014-02-06 09:33:49

正如汤姆所说，background-color: rgba(229,229,229, 0.85)可以做到这一点。对父元素和子元素的样式不会受到影响。

来源

2014-09-05 18:38:19 Rik

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

回答

相关问题