Используя CSS, можете ли вы применить градиентную маску для перехода к фону по тексту?

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

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

Надеюсь, я достаточно описателен.

Спасибо.

Ответы

Ответ 1

Мне было интересно это точно так же. Решение на самом деле довольно простое. Хотя это, конечно, современная функция CSS3, поэтому вы придерживаетесь совместимости с браузером.

Webkit может позаботиться об этом с помощью одной строки CSS:

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

Это уменьшило бы нижние 10% любого элемента, к которому он применим, не используя даже столько, сколько изображение. Вы можете добавить padding-bottom: 10%, чтобы убедиться, что контент только угас, когда прокручивается больше. Источник: http://www.webkit.org/blog/181/css-masks/

Резервное копирование Mozilla (Gecko) немного сложнее: вы можете использовать функцию 'mask', но для этого требуется SVG-изображение, Вы можете попробовать base64 вставить это изображение в таблицу стилей...

Ответ 2

Если вы затухаете до сплошного цвета, вы можете использовать элемент psudo:

.image-container {
    position: relative;
    display: inline-block;
  }

.image-container:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 55%;
  bottom: 0;
  background: -webkit-linear-gradient(transparent, #FFF) left repeat;
  background: linear-gradient(transparent, #FFF) left repeat; 
}

<div class="image-container">
  <img src="https://photosharingsites.files.wordpress.com/2014/11/tiger-wild-cat-animal-winter-snow-wallpapers-free-backgrounds.jpg?w=474&h=344" alt="don't shoot me">
  </div>

Ответ 3

Предполагая, что я правильно понимаю, что вы хотите, вы можете дублировать верхние 300-пиксельные пиксели вашего изображения и применять градиент прозрачности к ним в Photoshop (делая верх полностью непрозрачным и снизу полностью прозрачным).

Затем поместите это изображение в div или какой-либо другой элемент, зафиксированный в верхней части фиксированного изображения, но с высоким z-index. Затем основной текст будет прокручиваться по фону, но под наложением div и исчезать, когда наложение становится более непрозрачным в верхней части экрана.