Вопрос:
Я не уверен, какая правильная терминология для этого эффекта. Я хочу сказать, что это режим смешивания или обтравочный контур. То, что я хочу сделать, – это когда текст получает прокрутку (или под) другого элемента, чтобы текст менял свой цвет. См. Пример ниже.
Таким образом, текст по умолчанию является светло-серым, а затем, когда он прокручивается под ним (или наоборот, не уверен, каким образом он должен быть уложен), эта серая полоса становится черной.
Я знаю, что видел это раньше, но просто не могу вспомнить, как было вызвано свойство.
Лучший ответ:
Я думаю, что вы ищете mix-blend-mode, но Browser Support еще довольно плохо скрипку.
body { height: 1000px; } .text { text-transform: uppercase; position: absolute; top: 80%; font-size: 50px; font-weight: bold; text-align: center; width: 100%; color: gray; z-index: 2; left: 0; mix-blend-mode: difference; } .box { width: 60%; position: fixed; transform: translate(-50%, 0); z-index: 1; left: 50%; top: 0; height: 100px; background: #AAAAAA; }<div class=»box»></div> <div class=»text»>Lorem ipsum</div>Ответ №1
Вы имеете в виду что-то вроде этого?:
<div style=»position:absolute; top:0; left:0; bottom:0; right:0; overflow:auto;»> <div style=»height:1000px; background-color:#ccc»> <br/><br/>EXAMPLE<br/>EXAMPLE<br/>EXAMPLE </div> </div> <div style=»position:absolute; top:0; left:0; height:50px; right:16px; background-color:white; opacity:0.5″> </div>
Пример: https://jsbin.com/bexafinuti/edit?html,output
Эта функция может быть выполнена с opacity css. Содержимое становится серым при прокрутке под абсолютным позиционированным div с белым фоном и полупрозрачностью