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

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

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

1 个答案: