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

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

我想在父DIV不透明但不是儿童DIV

例

HTML

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

CSS

 .parent{ background:url('..http://img.dovov.commadu.jpg') no-repeat 0 0; } .child{ Color:black; } 

注意： –我想在Parent Div不背景的背景图像

Answer 1

如果你:after伪类: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透明度

解决scheme是使用不同的元素组合，通常使用固定或计算的位置来定义今天定义为孩子的位置：对于用户来说，它可能对孩子而言显得逻辑和视觉化，但是元素并不需要真的是一个孩子你的代码。

使用CSS： 小提琴的解决scheme

 .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： 小提琴的另一个解决scheme

Answer 6

我有同样的问题，我通过设置透明PNG图像作为父标签的背景。

这是我用60％不透明度的黑色背景创build的1px x 1px PNG图像 ！

Answer 7

你不能这样做，除非你把孩子从父母身边带走，并通过定位来放置孩子。

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