如何设置不透明度在父div和不影响在子div？ [英] How to set opacity in parent div and not affect in child 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 {
颜色：黑色; 
} 
  

注意： > background-image in Parent Div not Color

解决方案

如果您在：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; 
} 
  

检查此小提琴

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

Example

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

Note: -- I want to background-image in Parent Div not Color

解决方案

May be it's good if you define your background-image in the :after pseudo class. Write like this:

.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

这篇关于如何设置不透明度在父div和不影响在子div？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！