首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在父div中设置不透明度而在子div中不受影响?

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

Stack Overflow用户
提问于 2012-06-04 17:25:24
回答 7查看 134.2K关注 0票数 97

嘿,我在谷歌上搜索,但我找不到任何完美的答案

我想要父DIV而不是子DIV中的不透明

示例

HTML

代码语言:javascript
复制
<div class="parent">
<div class="child">
Hello I am child 
</div>
</div>

Css

代码语言:javascript
复制
.parent{
background:url('../images/madu.jpg') no-repeat 0 0;
}
.child{
Color:black;
}

注意:-- background-image I want to in Parent Div Parent Div

EN

回答 7

Stack Overflow用户

回答已采纳

发布于 2012-06-04 18:07:51

如果您在:after伪类中定义您的background-image,可能会更好。像这样写:

代码语言:javascript
复制
.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

票数 49
EN

Stack Overflow用户

发布于 2013-01-26 00:04:13

我知道这很古老,但以防万一它会对别人有帮助。

代码语言:javascript
复制
<div style="background-color: rgba(255, 0, 0, 0.5)">child</div> 

其中rgba是:红色、绿色、蓝色,a是透明的。

票数 103
EN

Stack Overflow用户

发布于 2012-06-04 17:55:58

你可以用伪元素来实现:(demo on dabblet.com)

你的标记:

代码语言:javascript
复制
<div class="parent">
    <div class="child"> Hello I am child </div>
</div>

css:

代码语言:javascript
复制
.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;
}
票数 17
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/10879045

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档