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

Chris спросил: 28 марта 2018 в 01:51 в: javascript

Как вы можете видеть из следующего фрагмента кода, при прокрутке страницы текст проходит под фиксированным div. Как я могу сделать текст за этим фиксированным div невидимым? Он по-прежнему должен быть видимым, если не под фиксированным div.

Цвет фона содержимого страницы изменяется, поэтому я не могу просто установить цвет фиксированного div в цвет фона.

p>

EDIT: Извините, я должен был объяснить это немного лучше. Оверлейный div не будет зеленым, я хочу, чтобы он соответствовал цвету фона под ним, поэтому он дает эффект исчезновения текста, когда он проходит через оверлейный div. Я не могу просто установить его на фоновый цвет содержимого, потому что цвет фона содержимого под ним изменяется на всей странице.

div.pagecontent1 {
  height:300px ;
  background-color: white;
  color: black;
}

div.pagecontent2 {
  height:300px ;
  background-color: black;
  color: white;

}

div.overlay {
  position:fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 500;
  height: 100px;
  background-color: green;
  opacity: 0.5;
}

<div class="pagecontent1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="pagecontent2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="pagecontent1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="pagecontent2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="pagecontent1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>
<div class="pagecontent2">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>

<div class="overlay"></div>

1 ответ

Есть решение
Temani Afif ответил: 28 марта 2018 в 02:43

Вот идея использования линейного градиента и некоторых JS для регулировки положения:

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--y', (-scroll)+"px");
}
body {
 margin:0;
}
.pagecontent {
  background:linear-gradient(to bottom,black 50%,white 0)0 0/100% 640px;
  color: black;
}

.pagecontent p {
  height:300px ;
  padding:10px;
  margin:0;
}
.pagecontent p:nth-child(2n+1) {
  color:white;
}

.overlay {
  position:fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 500;
  height: 100px;
   /*Use the same gradient*/
   background:linear-gradient(to bottom,black 50%,white 0)0 0/100% 640px;
   /*Use fixed to have the same reference*/
   background-attachment:fixed;
   /*translate the Y position to create the scroll effect and follow the other gradient*/
   background-position:0 calc(var(--y));
}
<div class="pagecontent">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor varius porta. Nunc leo dui, efficitur a commodo eu, dapibus non tortor. Nulla eget purus eleifend, placerat lorem eu, egestas arcu. Vestibulum risus est, aliquam vitae condimentum ac, gravida tristique nibh. Duis semper volutpat turpis, nec volutpat tortor varius eget. Proin commodo, augue eu aliquet luctus, nibh orci cursus lectus, eu congue ex dolor eget augue. Quisque a tincidunt odio, id aliquam felis. Sed mollis laoreet sollicitudin. Quisque vehicula tellus augue, eleifend hendrerit mauris elementum vel. Ut ut leo accumsan, iaculis mauris vel, fermentum nisl. In viverra, magna a condimentum sodales, nisl lorem posuere lectus, id dignissim felis libero ac tellus. Proin at sodales velit. Phasellus nec tellus id quam convallis tincidunt. Mauris tempor tristique fermentum. Sed volutpat augue eu ornare porta. Curabitur eu egestas mi. Vestibulum at urna non orci consequat eleifend tristique sed risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius neque tellus, et sollicitudin tortor maximus eget. Sed sit amet leo eget sem scelerisque euismod nec vitae felis. Morbi auctor pharetra fringilla. Proin congue ex convallis, maximus erat a, pulvinar dolor. Donec ac ipsum ligula. Donec scelerisque odio in leo dignissim hendrerit. Proin placerat diam ac est tempor ultrices. Etiam fermentum, neque non ullamcorper laoreet, erat felis sodales urna, blandit placerat justo arcu nec enim. Maecenas efficitur magna vel lacus ornare, eu sollicitudin sem semper. Proin id porttitor lorem, vel porta elit. Ut in metus facilisis, pretium velit suscipit, accumsan purus. Quisque congue neque eget nunc pellentesque posuere.</p>
</div>

<div class="overlay"></div>
Chris ответил: 28 марта 2018 в 02:49
Это абсолютно идеально. Спасибо! Будет ли это скрывать изображения тоже? Или просто текст?
Temani Afif ответил: 28 марта 2018 в 02:52
@ Крис это все спрячет;) Просто обратите внимание на то, как вы определяете градиент
Chris ответил: 28 марта 2018 в 02:55
Большое спасибо за уделенное время!