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

Я хочу, чтобы div был фиксированной частью фона другого движущегося div. Итак, представьте, что верхняя половина сайта — это белый div. Нижняя половина представляет собой синий div с красными кругами, плавающими вокруг него. Когда пользователь прокручивает, синий div будет прокручиваться поверх белого div. Красные круги имеют фиксированную позицию и расположены на странице случайным образом. Я хочу, чтобы они отображались только на синем div, поэтому белый div должен их скрывать.

Я пытался сделать это с z-индексами, но не могу заставить работать все перекрытия одновременно. По сути, красные круги должны быть одновременно позади белого div и перед синим div, но синий div также должен быть перед белым div. Я просмотрел клипы, но понял только, как обрезать красные круги в положении относительно самих себя. Не вырезать область экрана, чтобы при перемещении в эту область они маскировались. Также не уверен, как заставить клип перемещаться с белым div за пределы страницы при прокрутке пользователя.

введите здесь описание изображения


html clip css z-index display
person jomak73    schedule 14.07.2019    source источник
comment
красные круги должны быть одновременно за белым блоком и перед синим блоком, но синий блок должен быть и перед белым блоком --› математически это невозможно: если A › B и C ‹ B у вас не может быть C › A   -  person Temani Afif    schedule 14.07.2019
comment
да, но я надеюсь, что есть какой-то трюк css, чтобы обойти это. например, применение маски к элементу на основе другого div. просто не уверен, что это возможно   -  person jomak73    schedule 14.07.2019
comment
поделись своим кодом, наверное это проще чем ты описал   -  person Temani Afif    schedule 14.07.2019
comment
Может быть, поделитесь картинкой, которая объясняет, что вы имеете в виду   -  person Rob Kwasowski    schedule 14.07.2019
comment
Добавил картинку   -  person jomak73    schedule 14.07.2019
comment
В белом div есть что-нибудь или это просто белое?   -  person Salix    schedule 14.07.2019
comment
внутри него есть дочерние элементы   -  person jomak73    schedule 14.07.2019
comment
И вы хотите, чтобы эти дочерние элементы были исправлены или они могут прокручиваться вверх?   -  person Salix    schedule 14.07.2019
comment
Дети белого div должны прокручиваться вместе с ним. Исправлены только красные круги   -  person jomak73    schedule 14.07.2019
comment
хорошо, это выполнимо. Если бы их нужно было исправлять, это потребовало бы некоторого JS   -  person Salix    schedule 14.07.2019

Ответы (2)


arrow_upward
0
arrow_downward

Если красные круги - это просто красные круги, вы можете рассмотреть трюк с background-attachment:fixed

.top{
 background:url(https://picsum.photos/id/10/800/600) center/cover;
 height:200px;
}
.bottom{
 /* Random circles*/
 background-image:
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%),
  radial-gradient(farthest-side,red 95%,transparent 100%);
 background-position:
  10px 10px,
  10px 150px,
  200px 10px,
  200px 300px,
  300px 80px;
 background-size:40px 40px;
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-color:rgba(0,0,255,0.5);
 height:400px;
 margin-top:-50px; /* To create a small overalp with top*/
}
<div class="top">

</div>
<div class="bottom">

</div>

person Temani Afif    schedule 14.07.2019
comment
на самом деле это div с радиусом границы 50% и фильтром размытия. Я добавляю их с помощью javascript со случайными настройками и анимирую их положение, масштаб и непрозрачность с помощью преобразования. Представьте себе прозрачные пузыри, медленно движущиеся по экрану. Могу ли я использовать этот трюк с ними? - person jomak73; 14.07.2019

arrow_upward
0
arrow_downward

Поскольку синий div прокручивается с белым, вы можете сделать положение синего div абсолютным. Находясь под белым div, он все равно будет прокручиваться. С двумя элементами позиционирования вы можете заставить z-индексы работать, если z-индекс вашего синего div будет равен -2, а z-индекс красных кругов будет -1.

html, body, .container{
  height: 100%;
  width: 100%;
  margin: 0;
}
.top, .bottom{
  height: 100%;
  width: 100%;
  z-index: 0;
}
.top{
  background: white;
  .content{
    margin: 5%;
    color: red;
  }
}
.bg{
  position: absolute;
  height: 100vh;
  width: 100%;
  background: blue;
  z-index: -2;
  .content{
    margin: 5px;
  }
}
.circle{
  position: fixed;
  height: 50px;
  width: 50px;
  background: red;
  border-radius: 50%;
  z-index: -1;
}

.c-1{
  left : 25%;
  top : 25%;
}

.c-2{
  left : 60%;
  top : 40%;
}

.c-3{
  left : 10%;
  top : 78%;
}
<div class="container">
  <div class="top">
    <div class="content">
      <h1>some text</h1>
    </div>
  </div>
  <div class="bottom">
    <div class="circle c-1"></div>
    <div class="circle c-2"></div>
    <div class="circle c-3"></div>
    <div class="bg">
     <div class="content">
       <p> some text </p>
      </div>
    </div>
  </div>
</div>

person Salix    schedule 14.07.2019