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

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

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

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


gradient css masking
person aviemet    schedule 01.03.2012    source источник
comment
прочтите это и следуйте общему руководству: webdesignerwall.com/tutorials/css-gradient-text-effect < / а>   -  person Luca Filosofi    schedule 02.03.2012
comment
Спасибо, я видел это до того, как опубликовал это, и это сработало бы, если бы я просто хотел исчезнуть до белого, но я хочу исчезнуть до фона изображения страницы.   -  person aviemet    schedule 02.03.2012

Ответы (4)


arrow_upward
89
arrow_downward

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

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 прямо сейчас.

person Adrian van Vliet    schedule 12.03.2012
comment
Обязательно - alistapart. ru / article /: P - person BoltClock; 12.03.2012
comment
Большое спасибо, это именно то, что мне было нужно! - person Mark; 11.01.2013
comment
Было здорово обнаружить это, и это прекрасно работает на webkit. Однако мне трудно добиться того же эффекта в Firefox (не говоря уже о IE). Какие-нибудь указатели или примеры вы можете дать? Я не гуру SVG, поэтому буду очень признателен. - person keystorm; 23.02.2013
comment
webkit ты красавчик ублюдок - person Max; 29.10.2014
comment
Для Firefox вы можете использовать свойство mask-image. Похоже, синтаксис значения атрибута немного отличается. - person lex82; 23.08.2017
comment
Приближается 2020 год, а простых кроссбраузерных масок у нас все еще нет. Это смешно. - person Gavin; 08.10.2019

arrow_upward
18
arrow_downward

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

В этом фрагменте кода я присвоил элементу 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>

person Flimm    schedule 27.07.2018

arrow_upward
17
arrow_downward

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

person ecolema    schedule 02.10.2015
comment
Добавьте touch-events: none к этому ребенку. :) - person sheriffderek; 17.12.2018

arrow_upward
1
arrow_downward

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

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

person Gareth    schedule 01.03.2012
comment
Это было бы хорошим решением, за исключением того, что я ставлю более высокий приоритет масштабированию фона всей страницы до размера окна. Я больше надеялся применить маску, которая повлияет на элемент, к которому я ее применил, и все, что в нем содержится, включая текст. - person aviemet; 02.03.2012