如何製作小孩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>