如何制作小孩DIV从图像上的透明色40％的父母上移除颜色透明度？

Question

我有一个父DIV：

background-image: url('img.jpg'); background-color: rgba(0,0,0,0.4);

和一个孩子的div：

width: 400px; height: 400px;

如何让孩子DIV显示父母的背景图像的一部分，没有黑色透明度？

.parent { 
 
    width: 500px; 
 
    height: 500px; 
 
    background: url('http://i.imgur.com/Y6a49hy.png'); 
 
} 
 

 
.child { 
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.non-shadowed-div { 
 
    width: 300px; 
 
    height: 300px; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    <div class="non-shadowed-div"> 
 
     This div shouldn't be shadowed like the rest of the square 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

一种选择是用箱阴影做到这一点：

.outer { 
 
    background: url('https://fillmurray.com/400/200') no-repeat center; 
 
    height: 600px; 
 
    width: 100%; 
 
    background-size: cover; 
 
    position: relative; 
 
    overflow: hidden 
 
} 
 

 
.inner { 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 25%; 
 
    width: 50%; 
 
    height: 50%; 
 
    background: transparent; 
 
    box-shadow: 0 0 0 1000px rgba(0,0,0,.5); 
 
}

<div class="outer"> 
 
    <div class="inner">lalalalala</div> 
 
</div>

Answer 2

到盒子阴影回答另外一个办法是只需添加一个边框内部分区

div { 
 
    width: 500px; 
 
    height: 500px; 
 
    box-sizing:border-box; 
 
} 
 
.parent { 
 
    background: url('http://i.imgur.com/Y6a49hy.png'); 
 

 
} 
 
.non-shadowed-div { 
 
    border: 100px solid rgba(0,0,0,0.7); /* 100px border on each side leaves you with a 300px box in the middle */ 
 
}

<div class="parent"> 
 
    <div class="non-shadowed-div"> 
 
    This div shouldn't be shadowed like the rest of the square 
 
    </div> 
 
</div>

Answer 3

您可以模拟该如下图所示。父只有背景图片。孩子有一个很大的边界模拟图像的覆盖。

.parent { 
 
    width: 200px; 
 
    height: 200px; 
 
    background: url("http://lorempixel.com/200/200"); 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    overflow: hidden; 
 
} 
 

 
.child { 
 
    min-width: 100px; 
 
    min-height: 100px; 
 
    background-color: transparent; 
 
    border: solid rgba(0, 0, 0, 0.8) 10em; 
 
}

<div class="parent"> 
 
    <div class="child"> 
 
    </div> 
 
</div>