it-swarm.com.ru

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

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

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

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

 

37
aviemet

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

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) немного сложнее: вы можете использовать его «маску» , но для этого требуется SVG-изображение. Вы можете попробовать base64 внедрить это изображение в вашу таблицу стилей ... Используйте mask-image в Firefox сейчас.

62
Adrian van Vliet

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

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

11
ecolema

Вот как вы можете сделать это, используя современные свойства 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>

6
Flimm

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

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

1
Gareth