101

嘿，我正在谷歌搜索，但我无法找到任何完美的答案

我想在父 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不是颜色

4

7 回答 7

104

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

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

其中rgba是：红色、绿色、蓝色，并且a是透明度。

于 2013-01-25T16:04:12.647 回答
49

如果您在伪类中定义背景图像可能会很好。: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;
}

检查这个小提琴

于 2012-06-04T10:07:50.703 回答
19

您可以使用伪元素来做到这一点：（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;
}
于 2012-06-04T09:55:58.070 回答
12

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

于 2014-09-05T18:38:19.143 回答
6

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

逻辑渲染模型是这样的：

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

参考：css透明度

解决方案是使用不同的元素组合，通常对今天定义为子元素的元素使用固定或计算的位置：它可能在逻辑上和视觉上对用户作为子元素出现，但元素不需要是真正的子元素你的代码。

使用 css 的解决方案：小提琴

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

于 2012-06-04T09:29:00.200 回答
1

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

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

于 2014-02-06T09:33:49.250 回答
0

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

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

于 2012-06-04T09:43:30.707 回答