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

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

Свойство -webkit-background-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-background-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-background-composite: sourse-in;
}

По теме

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