UPDATE 2/26

Теперь в пример CodePen добавлены префиксы поставщиков, а в текст добавлены подсказки совместимости. Спасибо всем в комментариях.

Недавно я исследовал эффект пустотелости.

background-clip: text

Фон обрезается по цвету переднего плана текста. Впервые вижу такое использование в CSS-Tricks: на сайте CSS-Tricks эта штука используется везде.

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

.wrapper {
  /* ... */
  background-image: url("/path/to/your/image");
  -webkit-background-clip: text;  /* Chrome 用户注意加 -webkit 前缀 */
  background-clip: text;
  color: transparent;             /* 文字设为透明 */
}

Только эти несколько строк, будет большое визуальное изменение.До и после сравнения:

Кроме того,здесьСуществует более практичная демонстрация, чем приведенная выше.

Советы по совместимости

Помимо Firefox и Edge, другие браузеры должны соответствовать префиксу поставщика:

  -webkit-background-clip: text;

background-clipПоскольку он принадлежит к семейству «фоновых», он, естественно, имеет много общего с изображениями и градиентами. Однако, когда мы делаем выдолбление, это не всегда будут картинки или градиенты. Что, если мы захотим сделать эффекты выдалбливания для видео, текста и даже более сложных элементов DOM?

Сразу к делу: CSSmaskАтрибуты

Это, вероятно, самый простой способ думать об этом. Ведь в названии есть «маска», кто может ее игнорировать?

CSS mask-*Свойства серии определяются в модуле CSS Masking Module Level 1. Эта спецификация также определяет хорошо известнуюclipа такжеclip-pathСвойства, другими словами, этот модуль CSS состоит из маскирования и отсечения.

первый пример

Хотя это новое свойство, установить свойство маски несложно. Ниже приведен наш первый пример.

<div class="masked" />

.masked {
  height: 100px;
  width: 100px;
  background: linear-gradient(red, orange, yellow, lightgreen, blue, purple, red);
  -webkit-mask: url("https://github.githubassets.com/pinned-octocat.svg");
  mask: url("https://github.githubassets.com/pinned-octocat.svg");
}

Это эффект ниже.

Вышеприведенное использование по-прежнему очень простое, мы указываемmaskпараметр, его значение равноукрадено с гитхабаSVG-изображения. Итак, красочный градиентобрезатьМаска стала тем самым знаменитым котом.

Советы по совместимости

В настоящее время модуль маски все еще находится в состоянии кандидата в рекомендации, и многие браузеры теперь требуют префиксы поставщиков. Пользователи Chrome и пользователи Edge, пожалуйста, добавьте-webkitпрефикс, например-webkit-mask: ... ;. Firefox можно использовать напрямую.

Знать из Могу ли я использовать, плюс-webkit, есть еще много браузеров, поддерживающих Mask.

Для удобства чтения,код нижеНиктоиспользовать префикс.

маска-* большая семья

maskсвойств на самом деле многоmask-*аббревиатура:

mask-image
mask-repeat
mask-position
mask-clip
mask-origin
mask-size
-
mask-type
mask-composite
mask-mode

У вас естьbackground-*Непосредственное зрение? Да, многие свойства в нем такие же, как у backgorund/border, и функции у них тоже те же, ноbackground-*используется на фоне, в то время какmask-*Он просто используется на слое маски — трюки, использованные на фоне, переносятся в мир масок и могут быть использованы снова! Например, для достижения этого эффекта:

.masked {
  height: /* ... */;
  width: /* ... */;
  background: /* ... */;
  /* Webkit 内核用户请注意添加厂商前缀 -webkit */
  mask-image: url(https://github.githubassets.com/pinned-octocat.svg);
  mask-size: 5em;
  mask-position: center;
  /* 如果你心情好，加个动画也没问题的 */
}

Дальнейший контроль над матовым эффектом

Возможно, читатель уже заметил, чтоmask-*В семье есть несколько незнакомых лиц. Это тоже легко понять: такая мощная функция маски, скопируй ее полностьюbackground-*Не было бы жаль.

mask-mode

Mask-Mode используется для указания конкретных масок.

Предупреждение о совместимости:В настоящее времяmask-modeПоддерживается только в Firefox 53+.

Настройка свойства CSS типа маскиmask-imageМаска, которая используется для «Яркости», также используется для «Непрозрачности».mask-mode: alaphУказывает, что в качестве значения маски используется непрозрачность (то есть алаф-канал),mask-mode: luminanceУказывает, что значение яркости используется в качестве значения маски.

Тогда каково значение маски/значение маски? Значение маски представляет степень, в которой замаскированный элемент маскируется. Чем больше значение маски, тем более экспонированной будет маскируемая область.При максимальном значении маски область будет полностью непрозрачной. Например:

<div class="mode">ABCDEFG</div>

.mode {
  height: 200px;
  width: 300px;
  /* and more */
  mask-image: linear-gradient(to left, black, yellow);
  mask-mode: luminance; /* or alaph ? */
}

Слева изображение маски, посерединеluminanceиспользовать справаalaph. Изображение здесь непрозрачное, поэтому поместите постоянное непрозрачное изображение вalaphКак маска в режиме, эффект маски отсутствует. Но картинка имеет изменения яркости, поэтомуluminanceЗамаскированный элемент ниже показывает изменение прозрачности.

в общемluminanceРежим немного медленнее, потому что значение яркости каждого пикселя нужно рассчитывать на основе значений трех каналов RGB.

mask-composite

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

использоватьЭтот CodePen от MDNприйти и почувствовать

оmaskЗнаниеПроверьте это на MDN.

режим смешивания

Это, пожалуй, самый удивительный метод. При использовании PS вы часто будете видеть слово «режим наложения». Я помню, как мне было любопытно, что такое «режимы наложения», когда я впервые использовал Photoshop много лет назад, и я сразу же испытал благоговейный трепет перед Photoshop. Впрочем, почтение года есть благоговение, и теперь упомянутый здесь «смешанный лад» вполне понятен.

Так называемый «режим наложения» относится к методу вычисления окончательного значения цвета пикселя при перекрытии слоев. Каждый режим наложения принимает в качестве входных данных значение цвета переднего плана и значение цвета фона (соответственно вверху и внизу), выполняет некоторые вычисления и выводит окончательное значение цвета для отображения на экране. Конечный видимый цвет является результатом вычисления режима наложения для каждого перекрывающегося пикселя в слое.Проще говоря, режим наложения определяет, что вы получите, когда наложите один слой поверх другого.

В CSS вы можете использоватьmix-blend-modeчтобы указать режим наложения.

Вы можете спросить, я обычно не использую ничего подобного «режиму смеси», такblend-modeЗначение по умолчаниюnone? Не совсем. На самом деле, эта наиболее распространенная ситуация, когда верхний уровень «покрывает» нижний уровень, также является гибридным режимом, называемымnormal, который по существу является режимом наложения, который сохраняет только значение цвета переднего плана и полностью отбрасывает значение цвета фона.

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

Я думаю, вы понятия не имеете, какое это имеет отношение к выдолблению.Давайте рассмотрим пример ниже.

Теперь у нас есть<video>и наложение логотипа с «черными буквами на белом фоне».

Мы добавляем следующий CSS в окно плавающего слоя:

.logo {
    /* ... ... */
    mix-blend-mode: screen;
}

Это становится таким:

Перейдите к этой демонстрации, чтобы увидеть конкретный код и эффект

Значок шестеренки действительно стал пустым. Но почему?

Давайте сначала проясним одну вещь: поместите плавающий слой поверх видео, плавающий слой — это «передний план», а видео — «фон». Давайте сначала посмотрим на белую часть плавающего слоя.Поскольку белый цвет помещается поверх любого цвета, белая часть сохраняется, а поскольку черный помещается на любой цвет, получается цвет нижнего слоя, поэтому черная часть имеет эффект пустоты.

Но эта реализация более халтурная, потому что здесь используются только черный и белый цвета, если другие цвета используются в качестве плавающего слоя.background-color, это не будет выглядеть как выдолбленный эффект, тогда все равно придется спрашивать вышеmaskПоявляется семья. Однако только в случае белого фонаmix-blend-modeявляется возможным решением.