图像过滤器影响父元素

Question

在图库中，我想将一些用户标记为"已离开";通过在缩略图上应用红十字。下面的代码运行良好:

<style>
div.former {
position: relative;
width: 200px;
display: flex;
flex-direction: column;
justify-content: center;
background-color: #f00;
}
div.former::before,
div.former::after {
position: absolute;
content: '';
width: 100%;
height: 15px; /* cross thickness */
background-color: red;
opacity: 0.8;
}
div.former::before {
transform: rotate(45deg);
}
div.former::after {
transform: rotate(-45deg);
}

</style>
<div class="former">
<img src="adam.jpg">
</div>

但是当我对图像

应用滤镜时则其中一个条消失

div.former img {
filter: grayscale(0.9);
}

用Firefox测试&Chrome，都表现出了这种行为。我也试过设置容器的高度，但没有效果。怎样才能让这个栏可见呢?

Answer 1

你只需要为before和after元素添加一个z-index，因为它出现在图像的后面。

div.former::before,
div.former::after {
z-index: 1;
}