Главная/ Cправочник HTML, CSS, Javascript/ CSS расширения/ Webkit/ Properties/ CSS свойство -webkit-mask-composite | назначение, допустимые значения, примеры

Свойство -webkit-mask-composite

Свойство -webkit-mask-composite определяет итоговую маску, как результат логической комбинации прозрачности нескольких масок.

Маска применяется для скрытия некоторых частей элемента.

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

Допустимые значения

  • clear — не производится никаких действий (в результате не получаем ничего)
  • source-over — отображается первая маска, сквозь полупрозрачные участки которой видно вторую маску, лежащую под ней
  • source-in — отображается только первая маска, попадающая в область непрозрачных пикселей второй маски (при этом вторая маска не отображается вовсе)
  • source-out — отображается только первая маска, не попадающая в область непрозрачных пикселей второй маски (при этом вторая маска не отображается вовсе)
  • source-atop — в пределах области непрозрачных пикселей второй маски, показываем первую маску сквозь полупрозрачные участки которой видно вторую маску, лежащую под ним
  • destination-over — отображаем вторую маску, сквозь полупрозрачные участки которой видно первую маску, лежащую под ним
  • destination-in — отображаем только вторую маску, попадающий в область непрозрачных пикселей первой маски (при этом первая маска не отображается вовсе)
  • destination-out — отображаем только вторую маску, не попадающую в область непрозрачных пикселей первой маски (при этом первая маска не отображается вовсе)
  • destination-atop — в пределах области непрозрачных пикселей первой маски, показываем вторую маску сквозь полупрозрачные участки которой видно первую маску, лежащую под ним
  • xor — отображаем только первую маску, не попадающую в область непрозрачных пикселей второй маски и вторую маску, не попадающую в область непрозрачных пикселей первой маски (область пересечения остается пустой)
  • plus-darker — сравниваем яркость каждого пикселя в обоих масках, и выбираем из каждой пары менее яркий
  • plus-lighter — сравниваем яркость каждого пикселя в обоих изображениях, и выбираем из каждой пары более яркий
Значение по умолчанию source-over
Применимо ко всем элементам
Наследование нет
Поддерживается браузерами
  • Safari 4.0 и выше
  • Chrome 3.0 и выше

Пример

CSS

div {
background-color:#ccc;
-webkit-mask-image:-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0))) -webkit-gradient(linear, left top, left bottom, from(rgba(1,0,0,0)), to(rgba(0,0,0,1)))
-webkit-mask-composite: sourse-in;
}

По теме

Теги: , , , ,
Показать комментарии