如何过滤元素的外部，但在其父元素内部

Question

我有两个这样的元素。

.parent {
height: 300px;
width: 300px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/2048px-Icecat1-300x300.svg.png");
background-position: center; 
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
border: 3px pink solid;
}
.children {
height: 200px;
width: 200px;
border: 3px blue solid;
}

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

我想要一种方法来过滤子filter-outside: opacity(0.5);的外部，但过滤父的内部

Answer 1

使用过滤器无法做到这一点。你所能做的只是一个小把戏来达到同样的效果。可以使用特性插入将阴影添加到父对象
通过将行box-shadow: inset 0 0 0 47px #ffffff8a;添加到.parent的样式中
但请记住，这是一个小技巧，例如，如果图片大小发生变化，就不会很好地工作

.parent {
height: 300px;
width: 300px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/2048px-Icecat1-300x300.svg.png");
background-position: center; 
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
border: 3px pink solid;
position: relative;
box-shadow: inset 0 0 0 47px #ffffff8a;
}
.children {
background-color: transparent;
height: 200px;
width: 200px;
border: 3px blue solid;
}

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

您可以尝试将阴影添加到子对象，并将overflow:hidden;添加到父对象。在这种情况下，如果图片大小发生变化，这将继续工作。

.parent {
height: 300px;
width: 300px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/2048px-Icecat1-300x300.svg.png");
background-position: center; 
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
border: 3px pink solid;
position: relative;
overflow: hidden;
}
.children {
box-shadow: 0 0 0 100000px #ffffff8c;
background-color: transparent;
height: 200px;
width: 200px;
border: 3px blue solid;
}

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

总之，最好的方法是将box-shadow属性设置为子级，如最后一个代码段所示。但不要忘记将overflow:hidden;添加到父级，否则阴影不会停止在父级div 的边界

Answer 2

div {
background: url("https://upload.wikimedia.org/wikipedia/commons/0/01/Figure_in_Manga_style.png") transparent no-repeat center center / cover;
width: 100vw;height: 250px;
display:flex;align-items:center;justify-content:center;
}
span:nth-child(1) {
width:100%;opacity:0.5;height:100%;
position:absolute;top:0;left:0;
background:white;z-index:0;
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 25%, 75% 25%, 75% 75%, 25% 75%, 25% 100%, 100% 100%, 100% 0%);
}

<div>
<span></span>
<span></span>
</div>

Answer 3

您可以使用未遮挡背景的副本：

.parent {
height: 300px;
width: 300px;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/2048px-Icecat1-300x300.svg.png");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
border: 3px pink solid;
position: relative;
}
.children {
height: 200px;
width: 200px;
border: 3px blue solid;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/6/6b/Icecat1-300x300.svg/2048px-Icecat1-300x300.svg.png");
background-size: 300px 300px;
background-position: center center;
z-index: 2;
}
.parent::before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(255, 255, 255, 0.5);
display: inline-block;
z-index: 1;
}

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