cross-fade()

Функция cross-fade() принимает список изображений с процентами, определяющими, какая часть каждого изображения сохраняется в плане непрозрачности при его смешении с другими изображениями. Значение процента должно быть указано без кавычек, содержать символ '%', и его значение должно находиться в диапазоне от 0% до 100%.

Функция может быть использована в CSS там, где может использоваться обычная ссылка на изображение.

Проценты перехода

Представьте процент как значение непрозрачности для каждого изображения. Это означает, что значение 0% означает полную прозрачность изображения, а значение 100% делает изображение полностью непрозрачным.

cross-fade(url(white.png) 0%, url(black.png) 100%); /* fully black */
cross-fade(url(white.png) 25%, url(black.png) 75%); /* 25% white, 75% black */
cross-fade(url(white.png) 50%, url(black.png) 50%); /* 50% white, 50% black */
cross-fade(url(white.png) 75%, url(black.png) 25%); /* 75% white, 25% black */
cross-fade(url(white.png) 100%, url(black.png) 0%); /* fully white */
cross-fade(url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */

Если какие-либо проценты опущены, все указанные проценты суммируются и вычитаются из 100%. Если результат больше 0%, то результат делится поровну между всеми изображениями с опущенными процентами.

В самом простом случае два изображения плавно переходят друг в друга. Для этого нужно указать процент только для одного изображения, второе будет плавно переходить соответственно. Например, значение 0% для первого изображения отображает только второе изображение, а 100% — только первое. Значение 25% отображает первое изображение с непрозрачностью 25%, а второе — 75%. Значение 75% — обратное, отображая первое изображение с непрозрачностью 75%, а второе — 25%.

Вышесказанное также можно было записать следующим образом:

cross-fade(url(white.png) 0%, url(black.png)); /* fully black */
cross-fade(url(white.png) 25%, url(black.png)); /* 25% white, 75% black */
cross-fade(url(white.png), url(black.png)); /* 50% white, 50% black */
cross-fade(url(white.png) 75%, url(black.png)); /* 75% white, 25% black */
cross-fade(url(white.png) 100%, url(black.png)); /* fully white */
cross-fade(url(green.png) 75%, url(red.png) 75%); /* both green and red at 75% */

Если проценты не указаны, оба изображения будут иметь непрозрачность 50%, при этом плавный переход будет представлять собой равномерное сочетание обоих изображений. В примере 50%/50% проценты указывать не обязательно, так как если значение процента опущено, указанные проценты суммируются и вычитаются из 100%. Результат, если он больше 0, затем делится поровну между всеми изображениями с опущенными процентами.

В последнем примере сумма обоих процентов не равна 100%, и поэтому оба изображения отображаются со своими значениями непрозрачности.

Если проценты не указаны и включено три изображения, каждое изображение будет иметь непрозрачность 33,33%. Две следующие строки практически идентичны:

cross-fade(url(red.png), url(yellow.png), url(blue.png)); /* all three will be 33.3333% opaque */
cross-fade(url(red.png) 33.33%, url(yellow.png) 33.33%, url(blue.png) 33.33%);

cross-fade( <image>, <image>, <percentage> )

Спецификация функции cross-fade() позволяет использовать несколько изображений и для каждого изображения устанавливать значения прозрачности независимо от других значений. Это не всегда было так. Исходный синтаксис, реализованный в некоторых браузерах, позволял использовать только два изображения, при этом сумма прозрачности этих двух изображений должна была быть ровно 100%. Исходный синтаксис поддерживается в Safari и поддерживается с префиксом -webkit- в Chrome, Opera и других браузерах на основе движка Blink.

cross-fade(url(white.png), url(black.png), 0%);   /* fully black */
cross-fade(url(white.png), url(black.png), 25%);  /* 25% white, 75% black */
cross-fade(url(white.png), url(black.png), 50%);  /* 50% white, 50% black */
cross-fade(url(white.png), url(black.png), 75%);  /* 75% white, 25% black */
cross-fade(url(white.png), url(black.png), 100%); /* fully white */

В реализованном синтаксисе сначала объявляются два изображения через запятую, за которыми следует запятая и обязательное значение процента. Пропуск запятой или процента делает значение недействительным. Процент — это непрозрачность первого объявленного изображения. Указанный процент вычитается из 100%, а разница является непрозрачностью второго изображения.

Пример с зелёным/красным цветом (с процентами, суммирующимися до 150%) и пример с жёлтым/красным/синим цветом (с тремя изображениями) из раздела синтаксиса спецификации невозможны в этой реализации.

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

• MDN Понимание WCAG, объяснения к руководству 1.1
• Понимание критерия успеха 1.1.1 | W3C Понимание WCAG 2.0

<cross-fade()> = 
  cross-fade( <cf-image># )  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

HTML

<div class="crossfade"></div>

CSS

.crossfade {
  width: 300px;
  height: 300px;
  background-image: -webkit-cross-fade(url("br.png"), url("tr.png"), 75%);
  background-image: cross-fade(url("br.png"), url("tr.png"), 75%);
}

Результат

• <image>
• <url>
• image()
• image-set()
• element()
• Использование CSS градиентов
• Функции градиента: linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-radial-gradient(), conic-gradient(), repeating-conic-gradient()