如何将div隐藏在另一个透明的div下，但保持主体可见？

Question

由于过滤器元素是粘性的，用户向下滚动时图片将位于其下方，但它是透明的，并且图像在其下方可见，我想隐藏该图像，同时保持身体背景可见...我尝试在周围玩耍使用z-index似乎无效。关于如何完成这项工作的任何想法？

<div className="filter">
    <!-- some clickable tags to filter images -->
</div>
<div className="grid_filter">
    <img src="..." />
    <img src="..." />
    <img src="..." />
    <img src="..." />
        ... 
        ... 
    <img src="..." />
</div>

和CSS：

.filter {
   position: sticky;
   top: 120px;
   background-color: #ee4d9070;
}

.grid_filter {
   width: 80%;
   margin-left: 10%;
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   grid-template-rows: auto;
   grid-gap: 50px;
}

Answer 1

好吧，似乎我刚刚发现了背景滤镜，当与模糊一起使用时，它实际上比我预期的效果更好，它看起来要好得多。

Answer 2

您是否检查了CSS的不透明度？对于前景物体？

https://www.w3schools.com/cssref/css3_pr_opacity.asp