Атрибуты: Параметры наложения полей элементов.

  Для задания визуальных эффектов возникающих при наложении полей элементов блочных тегов на Web-странице применяются атрибуты стилей положения.
  При наложении поле элемента определяется как единое целое фона, внутреннего контента, и полей всех "дочерних" элементов вместе с их фоном и контентом.
  Атрибуты:
  mix-blend-mode - Устанавливает способ наложения поля элемента на "нижние" поля.

Формат:

  • float:
      [Способ]]
      |initial
      |inherit
      |unset

Значения:

  • Способ - CSS значение blend-mode. (Значение по умолчанию - normal.)
  • inherit - Значение атрибута наследуется от элемента "родительского" тега.
  • initial - Значение атрибута устанавливается в значение по умолчанию.
  •  unset – Значения атрибута приводятся к унаследованным значениям если, таковые есть, в противном случае - к значениям по умолчанию.
  isolation - Устанавливает режим наложения полей.
  В случае последовательного наложения полей, визуальный эффект, заданный атрибутом mix-blend-mode, будет учитывать все "нижние" поля. Атрибут isolation позволяет отсечь группу наложенных полей для создания визуального эффекта наложения только внутри этой группы. Для этого такую группу помещают в контейнер, элемент которого связывают с атрибутом isolation.

Формат:

  • isolation:
      auto
      |isolate

Значения:

  • auto – Контейнер, содержащий поля "дочерних" элементов, прозрачен для создания эффекта их наложения на "нижние" поля. (Умолчание.)
  • isolate – Контейнер, содержащий поля "дочерних" элементов, изолирует их от эффекта наложения на "нижние" поля.


Пример:

<STYLE>
  #divx0 { position: relative; width: 240px; height: 240px;
    background: repeating-linear-gradient(red, blue 10px); border: thin solid black;}
  #divx1 { position: absolute; width: 150px; height: 150px; left: 10px;
     top: 10px; border: thin solid black; background: linear-gradient(-45deg, green, yellow, purple,blue, red, black);}
  #divx2 { position: absolute; width: 150px; height: 150px; left: 60px;
    top: 60px; border: thin solid black; background: linear-gradient(-45deg, green, yellow, purple,blue, red, black);}
  #divx { position: absolute; isolation: auto;}
  #divx0:hover #divx { isolation: isolate;}
</STYLE>
......

<DIV id="divx0">
  <DIV id="divx">
    <DIV id="divx1" STYLE="mix-blend-mode: difference;"></DIV>
    <DIV id="divx2" STYLE="mix-blend-mode: difference;" ></DIV>
  </DIV>
</DIV>
Пример наложения полей - наведите мышку.