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

Question

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

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

Вот изображение желаемого результата:

Answer 1

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

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

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

(Новый стандартизированный способ - использовать mask-image и linear-gradient с использованием нового синтаксиса. См. Caniuse.com для mask-image и linear-gradient .)

Это приведет к исчезновению нижних 10% любого элемента, к которому он применяется, без использования даже такого количества изображений. Вы можете добавить padding-bottom: 50%, чтобы убедиться, что содержимое исчезает только тогда, когда есть еще что прокрутить.

Источник: http://www.webkit.org/blog/181/css-masks/

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

Answer 2

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

.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>

Answer 3

Вот как вы можете сделать это, используя современные свойства mask-image и linear-gradient. К сожалению, в 2018 году они не полностью поддерживаются во всех браузерах. (См. Caniuse.com для mask-image и linear-gradient.)

В этом фрагменте кода я дал элементу html оранжевый и желтый градиентный фон, чтобы доказать, что этот метод использует реальную прозрачность и использует элемент под ним в качестве фона.

html {
  background: linear-gradient(to right, orange, yellow, orange);
  height: 100%;
}
div {
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
}

<div>
One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten
One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten One two three four five six seven eight nine ten
</div>

Answer 4

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

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