Для этой цели вводятся новые CSS-свойства: blend-mode
и background-blend-mode
.
В настоящее время вы не сможете использовать их в любой производственной среде, поскольку они очень новые и в настоящее время поддерживаются только Chrome Canary (экспериментальный веб-браузер) и Webkit Nightly.
Эти свойства настроены так, чтобы работать почти так же, как режимы наложения фотошопа, и позволяют задавать различные режимы в качестве значений этих свойств, таких как overlay
, screen
, lighten
, color-dodge
и, конечно, multiply
.. среди прочих.
blend-mode
позволил бы изображениям (и, возможно, содержанию?), Но я ничего не слышал, чтобы предположить, что в данный момент.) Наложены друг на друга, чтобы применить этот эффект смешивания.
background-blend-mode
будет очень похоже, но будет предназначено для фоновых изображений (устанавливается с использованием background
или background-image
), а не для реальных элементов изображения.
EDIT:
Следующий раздел становится немного неактуальным по мере роста поддержки браузеров. Проверьте эту таблицу, чтобы увидеть, какие браузеры поддерживают это: http://caniuse.com/#feat=css-backgroundblendmode
Если на вашем компьютере установлена последняя версия Chrome, вы можете увидеть использование этих стилей, включив некоторые флаги в вашем браузере (просто выбросьте их в адресную строку:)
chrome://flags/#enable-experimental-web-platform-features
chrome://flags/#enable-css-shaders
* note that the flags required for this might change at any time
Включите этих плохих парней, а затем проверьте эту скрипку: http://jsfiddle.net/cqzJ5/
(Если стили правильно включены в вашем браузере, два изображения должны быть смешаны, чтобы сцена выглядела как подводная)
Хотя это, возможно, и не самый правильный ответ в настоящий момент из-за почти полностью отсутствующей поддержки этой функции, мы можем надеяться, что современные браузеры примут эти свойства в ближайшем будущем, что даст нам действительно хорошее и простое решение. к этой проблеме.
Некоторые дополнительные ресурсы для чтения по режимам наложения и свойствам css: