CSS 如何在父div中设置不透明度而不影响子div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10879045/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set opacity in parent div and not affect in child div?
提问by Rohit Azad
Hey i am searching in google but i can't fine any perfect answer
嘿，我在谷歌搜索，但我找不到任何完美的答案
I want to Opacity in parent DIV but not Child DIV
我想在父 DIV 中不透明，但在子 DIV 中不透明
Example
例子
HTML
HTML
<div class="parent">
<div class="child">
Hello I am child
</div>
</div>
Css
css
.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}
Note: --I want to background-imagein Parent Divnot Color
注： -我想背景图像中Parent Div没有颜色
采纳答案by sandeep
May be it's good if you define your background-imagein the :afterpseudo class. Write like this:
如果您在伪类中定义背景图像可能会很好: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;
}
Check this fiddle
检查这个小提琴
回答by PaulSatcom
I know this is old, but just in case it will help someone else.
我知道这很旧，但以防万一它会帮助别人。
<div style="background-color: rgba(255, 0, 0, 0.5)">child</div>
Where rgbais: red, green, blue, and ais for transparency.
其中rgba：红色、绿色、蓝色，a用于透明度。
回答by Vladimir Starkov
You can do itwith pseudo-elements: (demo on dabblet.com)
您可以使用伪元素来实现：（dabblet.com 上的演示）
your markup:
你的标记：
<div class="parent">
<div class="child"> Hello I am child </div>
</div>
css:
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;
}
回答by Rik
As mentioned by Tom, background-color: rgba(229,229,229, 0.85)can do the trick.
Place that on the style of the parent element and child wont be affected.
正如汤姆所提到的，background-color: rgba(229,229,229, 0.85)可以做到这一点。把它放在父元素的样式上，子元素不会受到影响。
回答by Denys Séguret
You can't. Css today simply doesn't allow that.
你不能。今天的 CSS 根本不允许这样做。
The logical rendering model is this one :
逻辑渲染模型是这样的：
If the object is a container element, then the effect is as if the contents of the container element were blended against the current background using a mask where the value of each pixel of the mask is .
如果对象是一个容器元素，则效果就像使用蒙版将容器元素的内容与当前背景混合，其中蒙版的每个像素的值为 。
Reference : css transparency
参考：css透明度
The solution is to use a different element composition, usually using fixed or computed positions for what is today defined as a child : it may appear logically and visualy for the user as a child but the element doesn't need to be really a child in your code.
解决方案是使用不同的元素组合，通常对今天定义为子元素的元素使用固定或计算位置：对于作为孩子的用户来说，它可能在逻辑上和视觉上出现，但元素不需要是真正的子元素你的代码。
A solution using css : fiddle
使用 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;
}
Another solution with javascript : fiddle
另一个使用 javascript 的解决方案：fiddle
回答by Prakash Thangavelu
I had the same problem and I fixed by setting transparent png image as background for the parent tag.
我遇到了同样的问题，我通过将透明 png 图像设置为父标签的背景来解决。
This is the 1px x 1px PNG Image that I have created with 60% Opacity of black background!
回答by HymanJoe
You can't do that, unless you take the child out of the parent and place it via positioning.
你不能这样做，除非你把孩子从父级中取出并通过定位放置。
The only way I know and it actually works, is to use a translucid image(.png with transparency) for the parent's background. The only disavantage is that you can't control the opacity via CSS, other than that it works!
我知道并且它确实有效的唯一方法是使用半透明图像（具有透明度的 .png）作为父背景。唯一的缺点是你不能通过 CSS 控制不透明度，除了它可以工作！
