Товаров: 0 (0р.)

Наложение css слоев: Наложение и порядок слоёв | htmlbook.ru

Содержание

Наложение и порядок слоёв | htmlbook.ru

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

Рис. 3.51. Карты рядом друг с другом

Рис. 3.52. Карты одна на другой

Если представить веб-страницу в виде трёхмерного пространства (рис. 3.53), то видно, что карты располагаются также по оси Z. Значения по этой оси и определяют, какая карта к нам ближе, какая дальше, иными словами порядок их наложения друг на друга. В коде документа (пример 3.38) порядок определяется автоматически на основе потока документа. Чем элемент ниже в коде, тем он выше по оси Z, поэтому изображение с тузом, как самое нижнее, располагается поверх остальных карт.

Рис. 3.53. Воображаемые координаты веб-страницы

Пример 3.38. Обычный порядок карт

XHTML 1.

0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Порядок карт</title>
  <style type="text/css">
   .card IMG { position: relative; }
   .seven { left: -120px; top: 25px; }
   .ace { left: -240px; top: 50px; }
  </style>
 </head>
 <body>
  <p>
   <img src="images/3.png" alt="3" />
   <img src="images/7.png" alt="7" />
   <img src="images/ace.png" alt="Туз" />
  </p>
 </body>
</html>

В CSS за положением по Z-оси отвечает свойство z-index, которое определяет, «ближе» к нам элемент находится или «дальше». В качестве значений принимается целое число, чем оно больше, тем выше располагается элемент по отношению к другим. Элементам автоматически присваивается значение 0, так что даже z-index: 1 заставит элемент перекрывать все нижележащие. Доработаем пример 3.38 так, чтобы порядок карт поменялся на противоположный, причём только редактируя стиль, оставляя HTML-код прежним.



.card IMG { position: relative; }
.three { top: 50px; left: 55px; z-index: 5; }
.seven { left: -120px; top: 25px; z-index: 2; }
.ace { left: -295px; z-index: 1; }

Свойство z-index для класса three специально установлено как 5 для демонстрации, что последовательность значений z-index роли не играет. Главное, чтобы одно число было больше другого.

Свойство z-index работает только для элементов, у которых значение position задано как absolute, fixed или relative.

Когда требуется расположить элемент поверх всех остальных на странице, ему ставят очень большое значение z-index, например 9999. Это гарантирует, что даже если в стилях и применяется z-index, он будет меньше указанного. В примере 3.39 у карт при наведении на них курсора меняется z-index на 10. Никаких скриптов здесь не понадобится, всё делается через псевдокласс :hover.

Пример 3.39. Изменение z-index при наведении на карту

XHTML 1.0CSS 2.1IECrOpSaFx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Порядок карт</title>
  <style type="text/css">
   .card IMG { position: relative; }
   .three { top: 50px; left: 55px; z-index: 5; }
   .seven { left: -120px; top: 25px; z-index: 2;}
   .ace { left: -295px; z-index: 1; }
   .card IMG:hover { z-index: 10; }</style>
 </head>
 <body>
  <p>
   <img src="images/3.png" alt="3" />
   <img src="images/7.png" alt="7" />
   <img src="images/ace.png" alt="Туз" />
  </p>
 </body>
</html>

Наложение элементов | CSS: Позиционирование элементов

В уроке про плавающие элементы вы могли увидеть, что элементы HTML могут накладываться друг на друга. Такое же поведение было при выставлении позиционирования отличного от нормального. Наложением элементов можно управлять и с помощью CSS-свойства

z-index. Из названия свойства можно увидеть, что речь идёт об оси z.

Эта ось отвечает за то, какие элементы будут располагаться на переднем, а какие на дальнем плане. Попробуем использовать на трёх блоках абсолютное позиционирование:

Возникнет естественный вопрос: «А где остальные два блока?». Они скрылись за последним блоком .block-three. Когда мы дали каждому блоку абсолютное позиционирование, то начали в одном и том же месте накладывать блоки друг на друга. Первым в угол встал блок .block-one, после этого у браузера возникла задача переместить блок .block-two ровно на это же место. Для этого он выставил приоритет по оси

z второму блоку и наложил его на первый. Данная операция повторилась с последним блоком, и он занял видимую позицию, «вытеснив» своих братьев.

При таком взаимодействии блоки никуда не исчезают из кода, это можно проверить, выставив разные свойства ширины и высоты для каждого из блоков:

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

z. Важно, что свойство z-index работает только с элементами, у которых установлено свойство position с одним из значений:

  • absolute
  • relative
  • fixed
  • sticky

Важным для понимания моментом является то, как браузер по умолчанию позиционирует элементы:

  1. Первым всегда идёт элемент HTML. Поверх него накладываются все остальные элементы.
  2. Далее идут все элементы в нормальном потоке документа. Элементы идут по всем правилам расположения блочных и строчных элементов.
    Они позиционируются в том порядке, в котором определены внутри HTML-документа.
  3. В конце накладываются все элементы с position в том порядке, в котором они определены внутри HTML-документа. Это можно увидеть на примерах выше.

Попробуем поменять порядок элементов в последнем примере. Для этого установим второму и третьему блоку такие значения, чтобы они поменялись местами. Необходимо для блока .block-two установить значение z-index больше, чем у блока .block-three. В результате третий блок «исчезнет», так как имеет меньшие размеры:

Свойство z-index

может принимать как отрицательные, так и положительные значения. Здесь нет никакой магии и отрицательные значения будут находиться «ниже» положительных. В реальных проектах хорошей практикой считается установка значения z-index с шагом в 100 при достаточно больших значениях. Это делается для удобства чтения и правок стилей:

z-index: 34234;
z-index: 43233;
z-index: 34324;

Определить, в каком порядке расположатся элементы, при таких значениях достаточно трудно. Необходимо вчитываться в каждую цифру. Сравните это с таким вариантом:

z-index: 34200;
z-index: 43200;
z-index: 34300;

Контекст наложения (stacking context) — CSS

Контекст наложения (stacking context) это концепция трёхмерного расположения HTML-элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном.  HTML-элементы занимают это место по порядку, основанному на атрибутах элемента.

« CSS « Understanding CSS z-index

 

В предыдущем примере  Добавляем z-index, порядок отображения определённых DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( stacking context ).

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

  • является корневым элементом (HTML),
  • позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от «auto»,
  • flex элемент с z-index отличным от  «auto», чей родительский элемент имеет свойство display: flex|inline-flex,
  • элементы с  opacity меньше чем 1. (См. the specification for opacity),
  • элементы с  transform отличным от «none»,
  • элементы с mix-blend-mode значением отличным от «normal»,
  • элементы с filter значением отличным от «none»,
  • элементы с isolation установленным в  «isolate»,
  • position: fixed
  • если мы указываем элементу атрибут  will-change при этом не обязательно присваивать ему значения (См. this post)
  • элементы с -webkit-overflow-scrolling (en-US) установленным в «touch»

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

Суммируем:

  • Позиционирование и присваивание HTML-элементам свойства z-index создаёт контекст наложения, (так же как и присваивание элементу opacity меньше 1).
  • Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения. 
  • Каждый контекст наложения абсолютно независим от своего соседа: только подчинённые элементы учитываются при обработке контекста наложения.

Note: Иерархия контекстов наложения является подмножеством иерархии HTML-элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.

В примере каждый позиционированный элемент создаёт свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:

Важно отметить, что DIV #4, DIV #5 и DIV #6 являются дочерними для DIV #3, поэтому они полностью располагаются в DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling’s DIV.

Notes:

  • DIV #4 отрисовывается под DIV #1, потому что z-index (5) DIV #1 действителен внутри контакта наложения корневого элемента, в то время как z-index (6) DIV #4 действителен внутри контекста наложения DIV #3. Поэтому,  DIV #4 находиться ниже DIV #1, потому что DIV #4 принадлежит DIV #3, который в свою очередь имеет меньший z-index(по сравнению с .DIV #1).
  • По этим же причинам DIV #2 (z-index 2) отрисовывается под DIV#5 (z-index 1), так как DIV #5 принадлежит DIV #3, чей z-index больше( чем z-index DIV #2).
  • У DIV #3 есть свойство z-index 4, но это значение независимо от z-index’ов DIV #4, DIV #5 и DIV #6, потому что принадлежат они разным контекстам наложения.
  • An easy way to figure out the rendering order of stacked elements along the Z axis is to think of it as a «version number» of sorts, where child elements are minor version numbers underneath their parent’s major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1). In our example (sorted according to the final rendering order):
    • Root
      • DIV #2 — z-index is 2
      • DIV #3 — z-index is 4
        • DIV #5 — z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4.1
        • DIV #6 — z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3
        • DIV #4 — z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6
      • DIV #1 — z-index is 5
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>

    <title>Understanding CSS z-index: The Stacking Context: Example Source</title>

    <style type="text/css">
      * {
        margin: 0;
        }
      html {
        padding: 20px;
        font: 12px/20px Arial, sans-serif;
        }
      div {
        opacity: 0. 7;
        position: relative;
        }
      h2 {
        font: inherit;
        font-weight: bold;
        }
      #div1, #div2 {
        border: 1px dashed #696;
        padding: 10px;
        background-color: #cfc;
        }
      #div1 {
        z-index: 5;
        margin-bottom: 190px;
        }
      #div2 {
        z-index: 2;
        }
      #div3 {
        z-index: 4;
        opacity: 1;
        position: absolute;
        top: 40px;
        left: 180px;
        width: 330px;
        border: 1px dashed #900;
        background-color: #fdd;
        padding: 40px 20px 20px;
        }
      #div4, #div5 {
        border: 1px dashed #996;
        background-color: #ffc;
        }
      #div4 {
        z-index: 6;
        margin-bottom: 15px;
        padding: 25px 10px 5px;
        }
      #div5 {
        z-index: 1;
        margin-top: 15px;
        padding: 5px 10px;
        }
      #div6 {
        z-index: 3;
        position: absolute;
        top: 20px;
        left: 180px;
        width: 150px;
        height: 125px;
        border: 1px dashed #009;
        padding-top: 125px;
        background-color: #ddf;
        text-align: center;
        }
    </style>

  </head>
  <body>

    <div>
      <h2>Division Element #1</h2>
      <code>position: relative;<br/>
      z-index: 5;</code>
    </div>

    <div>
      <h2>Division Element #2</h2>
      <code>position: relative;<br/>
      z-index: 2;</code>
    </div>

    <div>

      <div>
        <h2>Division Element #4</h2>
        <code>position: relative;<br/>
        z-index: 6;</code>
      </div>

      <h2>Division Element #3</h2>
      <code>position: absolute;<br/>
      z-index: 4;</code>

      <div>
        <h2>Division Element #5</h2>
        <code>position: relative;<br/>
        z-index: 1;</code>
      </div>

      <div>
        <h2>Division Element #6</h2>
        <code>position: absolute;<br/>
        z-index: 3;</code>
      </div>

    </div>

  </body>
</html>

Division Element #1

position: relative;
z-index: 5;

Division Element #2

position: relative;
z-index: 2;

Division Element #3

position: absolute;
z-index: 4;

Division Element #4

position: relative;
z-index: 6;

Division Element #5

position: relative;
z-index: 1;

Division Element #6

position: absolute;
z-index: 3;

Original Document Information

Свойство z-index — наложение элементов по оси Z

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

Синтаксис

селектор { z-index: число | auto; }

Число должно быть целым, положительным или отрицательным. Может быть нулем.

Значения

Значение Описание
Число Целое число задает порядок наложения элементов: при накладывании элементов друг на друга сверху окажется тот, у которого z-index больше.
auto Порядок наложения строится автоматически: выше будет тот элемент, который расположен ниже в HTML коде.

Значение по умолчанию: auto.

Пример

В данном примере блоки будут накладываться друг на друга в порядке их следования в HTML коде (z-index не задан и будет иметь значение по умолчанию — auto). Первый блок будет в самом низу (красный), а последний — выше всех (зеленый):

<div></div> <div></div> <div></div> #div1 { position: absolute; top: 30px; left: 30px; width: 50px; height: 50px; background: red; } #div2 { position: absolute; top: 60px; left: 60px; width: 50px; height: 50px; background: blue; } #div3 { position: absolute; top: 90px; left: 90px; width: 50px; height: 50px; background: green; }

:

Пример

Поменяем порядок наложения, задав z-index. Красному блоку — 3, голубому — 2, зеленому — 1. Порядок наложения поменяется на обратный (выше всех будет блок с z-index 3):

<div></div> <div></div> <div></div> #div1 { position: absolute; top: 30px; left: 30px; width: 50px; height: 50px; background: red; z-index: 3; } #div2 { position: absolute; top: 60px; left: 60px; width: 50px; height: 50px; background: blue; z-index: 2; } #div3 { position: absolute; top: 90px; left: 90px; width: 50px; height: 50px; background: green; z-index: 1; }

:

Режимы наложения слоёв в Web / Хабр

Привет, Хабр!

Одна из главных причин

тяжёлых увечий дизайнеров

претензий к неопытным дизайнерам от верстальщиков, при получении от них PSD-макетов — это наличие слоёв с заданными режимами смешивания, отличными от

normal

. Вполне возможно, что скоро это уйдёт в прошлое!


Речь пойдёт о реализации спецификации «

Compositing and Blending Level 1

» в современных браузерах.

Что это и для чего?

Данный стандарт описывает правила наложения слоёв друг на друга, аналогично тому, как это делается в

Photoshop

. Например, в режиме

multiply

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

1) Фотоэффекты, такие как обесцвечивание картинки, сепия, наложение цвета. Например, достаточно будет использовать только одну цветную картинку, чтобы получить плавную анимацию от обесцвеченной к цветной при наведении:
(по клику — живой пример на jsfiddle)
 

2) Часто дизайнеры ленятся вырезать фон из картинки и используют наложение картинки без прозрачности на слой так, что фоновый чёрный/белый цвет будет в данном режиме преобразуются в прозрачный (режим screen/multiply):

(на картинке внизу показал кусочек накладываемого изображения «как есть»)

3) Иногда можно использовать данную технологию для реализации эффектов с текстом, например, в логотипах:

4) Для создания различных эффектов-красивостей:
Демо, автор Justin Windle, http://soulwire. co.uk

Список режимов

Для примера будем накладывать тигра на такую картинку в разных режимах:



* здесь я взял раскрашенную в красные оттенки картинку, для демонстрации эффекта

Технологии применения и поддержка браузерами

По спецификации, применять режимы наложения можно в четырёх случаях:

1) Для фонового изображения в CSS

background-blend-mode: <blend-mode>;

Поддерживают: Chrome 35+, Firefox 30+ beta (войдёт ли в релиз этот функционал, ещё вопрос, т. к. скорее всего уже переносили «приземление» этого функционала).

2) Для HTML-элементов

mix-blend-mode: <blend-mode>;

Поддерживают: пока нет, но активно идёт разработка по реализации.

3) Для SVG

<feBlend mode="<blend-mode>">

Поддерживают: Chrome 35+, IE 10+ (

с отличиями

)

4) Для Canvas

.globalCompositeOperation = <blend-mode> | <composite-mode>*;
* доступны дополнительные режимы

Поддерживают: Chrome 29+, Firefox 24+, Opera 17+, Safari 6. 1+

Узнать подробнее о поддержке браузерами данного стандарта можно в таблице от adobe.

Добавление слоя карты OGC (Открытый геопространственный консорциум)

  • Статья
  • Чтение занимает 2 мин
Были ли сведения на этой странице полезными?

Оцените свои впечатления

Да Нет

Хотите оставить дополнительный отзыв?

Отзывы будут отправляться в корпорацию Майкрософт. Нажав кнопку «Отправить», вы разрешаете использовать свой отзыв для улучшения продуктов и служб Майкрософт. Политика конфиденциальности.

Отправить

В этой статье

Класс atlas.layer.OgcMapLayer позволяет накладывать на карту изображения из служб WMS (Web Map Services) и служб WMTS (Web Map Tile Services). WMS — это стандартный протокол, разработанный консорциумом OGC для предоставления через Интернет изображений карт с географической привязкой. Географической привязкой изображений называют любые процессы, позволяющие сопоставить изображение с географическим расположением. WMTS также является стандартным протоколом OGC. Он предназначен для предоставления предварительно подготовленных плиток карт с географической привязкой.

В следующих разделах описаны функции службы веб-карт, поддерживаемые классом OgcMapLayer.

Web Map Service (WMS)

  • Поддерживаемые версии: 1.0.0, 1.1.0, 1.1.1 и 1.3.0.

  • Служба должна поддерживать систему проекции EPSG:3857 или обрабатывать репроекции.

  • Для GetFeatureInfo нужно, чтобы служба поддерживала EPSG:4326 или обрабатывала репроекции.

  • Поддерживаемые операции:

    Операция Описание
    GetCapabilities Извлекает метаданные службы со сведениями о поддерживаемых возможностях
    GetMap Извлекает изображение схемы для указанной области
    GetFeatureInfo Извлекает feature_info с базовыми данными о компоненте

Web Map Tile Service (WMTS)

  • Поддерживаемые версии: 1. 0.0

  • Плитки должны быть квадратными, то есть TileWidth == TileHeight.

  • Поддерживаемые CRS: EPSG:3857 или GoogleMapsCompatible

  • Идентификатор TileMatrix должен содержать целочисленное значение, которое обозначает уровень масштабирования карты. На карте Azure значение уровня масштабирования должно находиться в диапазоне от "0" до "22". Это означает, что "0" поддерживается, но "00" не поддерживается.

  • Поддерживаемые операции:

    Операция Описание
    GetCapabilities Извлекает поддерживаемые операции и компоненты
    GetTile Извлекает изображения для определенной плитки

Наложение слоя карт OGC

В url может содержаться базовый URL-адрес для службы или полный URL-адрес с запросом для получения возможностей службы. В зависимости от предоставленных сведений клиент WFS может применить несколько стандартных форматов URL-адресов, чтобы подобрать правильный формат доступа к службе.

В следующем коде показано, как наложить слой карты OGC на карту.


Параметры слоя карты OGC

В следующем примере показаны параметры слоя карты OGC. Вы можете нажать кнопку с пером в правом верхнем углу, чтобы изменить код примера.


Обозреватель Web Map Service OGC

Указанное здесь средство накладывает изображения из служб WMS (Web Map Services) и служб WMTS (Web Map Tile Services) в виде слоев. Вы можете выбрать, какие из представленных в службе слоев будут отрисовываться на карте. Вы также можете просмотреть условные обозначения, сопоставленные с этими слоями.

Можно также указать параметры карты для использования службы прокси-сервера. Служба прокси-сервера позволяет загружать ресурсы, размещенные в доменах без поддержки технологии CORS.

Дальнейшие действия

Дополнительные сведения о классах и методах, которые используются в этой статье:

Изучите следующие статьи с примерами кода, которые можно добавить на карты:

mix-blend-mode css

Здравствуйте друзья и сегодня мы рассмотрим свойство css с помощью которого можно осуществлять наложение слоев друг на друга.

Допустим у нас есть следующий код: 

<style>
.block{
    background:url('fon.jpg') left top no-repeat;
    background-size:100%;
}
</style>
<div>
    <img src="image.jpg"/
</div>

Здесь у нас в элементе ‘block’ размещена некая картинка в формате jpg.

Элемент ‘block’ имеет фон в виде градиента который уж никак не сочетается с нашей картинкой jpg.

Для этого мы можем прибегнуть к наложению нашей картинки на слой фона.

Процессы наложения слоев в css осуществляются через свойство mix-blend-mode которое имеет множество значений:

multiply | screen | overlay | color-dodge | color-burn | difference | hue | color | luminosity | saturation и т. п. Все мы конечно рассматривать не будем. Некоторые из них довольно специфичны.

Итак вернемся к решению нашей проблемы. Для этого нам достаточно картинке прописать свойство mix-blend-mode со значением multiply. 

img{
    mix-blend-mode: multiply;
}

В результате фон картинки стал таким же как фон элемента.

Используя значение screen мы можем получить обратный эффект: 

img{
    mix-blend-mode: screen;
}

Здесь у нас при наложении слоев фон элемента ‘block’ отобразился в виде контуров картинки.

При overlay: 

img{
    mix-blend-mode: overlay;
}

Далее для наглядности наложения слоев лучше взять фотографию и поиграться с ней.

А теперь поехали! Применим значение color-burn: 

img{
	mix-blend-mode: color-burn;
}
img{
     mix-blend-mode:difference;

}
img{
	mix-blend-mode:hue;
}
img{
 mix-blend-mode:color;
}
img{
    mix-blend-mode:saturation;
}

На этом данная статья подошла к концу.

Как видите свойство mix-blend-mode помогает нам создавать полезные и необычные эффекты при наложении слоев. Некоторые из них довольно специфичны.

Дополнительную информацию о работе со свойством mix-blend-mode вы можете получить на Хабре https://habrahabr.ru/post/223893/ .

А я желаю вам творческих успехов и удачи! Пока!

Внимание!!! Комментарий теперь перед публикацией проходит модерацию

— CSS: каскадные таблицы стилей

Тип данных <режим наложения> определяется с использованием значения ключевого слова, выбранного из списка ниже.

Значения

нормальный

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

умножить

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

экран

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

накладка

Окончательный цвет является результатом умножения на , если нижний цвет темнее, или экрана на , если нижний цвет светлее. Этот режим наложения эквивалентен жесткому свету , но с перестановкой слоев.

затемнить

Конечный цвет состоит из самых темных значений каждого цветового канала.

облегчить

Конечный цвет состоит из самых светлых значений каждого цветового канала.

цвет-додж

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

цветной

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

жесткий свет

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

мягкий свет

Конечный цвет похож на hard-light , но мягче. Этот режим наложения ведет себя аналогично hard-light . Эффект аналогичен освещению фона рассеянным прожектором *.*

разница

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

исключение

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

оттенок

Окончательный цвет имеет оттенок верхнего цвета, при использовании насыщенности и яркости нижнего цвета.

насыщенность

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

цвет

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

светимость

Конечный цвет имеет яркость верхнего цвета, при этом используется оттенок и насыщенность нижнего цвета. Этот режим наложения эквивалентен цвету , но с перестановкой слоев.

Для каждого пикселя среди слоев, к которым он применяется, режим наложения берет цвета переднего плана и фона, выполняет их вычисление и возвращает новое значение цвета.

Изменения между режимами наложения не интерполируются. Любое изменение происходит немедленно.

обычный 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: нормальный;
}

умножить 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: умножить;
}

экран 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: экран;
}

накладка 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: наложение;
}

затемнить 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr. png');
  фоновый режим наложения: затемнить;
}

облегчить 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: осветлить;
}

колор-додж 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: цветовой уклон;
}

цветной 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: цветной ожог;
}

жесткий свет 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: жесткий свет;
}

мягкий свет 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: мягкий свет;
}

разница 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br. png'),
              URL('tr.png');
  фоновый режим наложения: разница;
}

исключение 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: исключение;
}

оттенок 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: оттенок;
}

насыщенность 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: насыщенность;
}

цвет 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr.png');
  фоновый режим наложения: цвет;
}

светимость 

  #дел {
  ширина: 300 пикселей;
  высота: 300 пикселей;
  фон: URL('br.png'),
              URL('tr. png');
  background-blend-mode: светимость;
}

Сравнение режимов наложения

В следующем примере у нас есть

с двумя установленными на нем фоновыми изображениями — логотип Firefox поверх линейного градиента. Под ним у нас есть меню