Как создать эффект градиента для содержимого на странице, такой как на этом website. Существует фоновое изображение и текст и изображения, отображающие цвет фонового изображения, который дает эффект градиента. Как создать аналогичный эффект (эффект нестатического градиента)?Эффект градиента на текст и изображения
Также это все CSS или есть библиотека Javascript, что можно достичь результата?
Имеет два контейнера div, расположенных друг над другом. Один с фоном, а другие содержат текст и изображения с помощью CSS свойств mix-blend-mode набора для screen
ДИВ с фоном должен иметь position: absolute; и полный width и height
mix-blend-mode: screen;
Я создал fiddle продемонстрировать ,
mix-blend-mode не поддерживается IE или Opera. Узнайте больше об этом here.
Для Text, вы можете прочитать по ссылке ниже с демонстрацией:
http://cssdeck.com/labs/css3-text-gradient
Для Image, вы можете сделать это путем добавления фильтра на изображение:
https://css-tricks.com/almanac/properties/f/filter/
Какой фильтр они использовали на сайте?
-webkit-filter: grayscale(100%) contrast(1.5) drop-shadow(0px 0px 1px white);
filter: grayscale(100%) contrast(1.5) drop-shadow(0px 0px 1px white);
Спасибо, ваше решение было нестатическим эффектом градиента, который я искал. Что, на ваш взгляд, лучший способ поддержать IE и Opera? Настройка цвета: черное правило на белом фоне, например, чтобы сделать контент еще связным и читаемым? – fbid
Я обновил вилку. Добавлено 'position: absolute;' для поддержки IE и Opera. Цвет уже установлен на черный, поэтому, когда режим mix-blend-mode не поддерживается. Это будет черный текст на белом фоне. http://jsfiddle.net/mohamedosama/q1cxnu82/3/ –
В вашей скрипке я заметил, что если вы добавляете больше контента (т. е. два блока текста lorem ipsum), они не видны, прокручивая страницу после высоты просмотра. Содержимое усекается, и есть только белый фон. – fbid