Как скрыть div под другим, прозрачным div, но сохранить тело видимым? - PullRequest
Новая
       26

Как скрыть div под другим, прозрачным div, но сохранить тело видимым?

0 голосов
/ 10 ноября 2019

Поскольку элемент фильтра является липким, изображения будут проходить под ним, когда пользователь прокручивает страницу вниз, но он прозрачный, и изображения становятся видимыми под ним, которые я хочу скрыть, сохраняя при этом видимый фон тела ... Я пытался игратьвокруг с 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;
}

1 Ответ

0 голосов
/ 11 ноября 2019

Хорошо, похоже, я только что обнаружил фоновый фильтр, который на самом деле дает лучший результат при использовании с размытостью, чем я ожидал, выглядит намного лучше.

...