Одна з найбільш шанованих особливостей Photoshop'а, можливо, особливість яка дозволяє випереджати своїх конкурентів - це режими накладення. Режими накладення беруть два пікселя, що лежать один над одним і комбінують їх різними способами, наприклад, режим затемнення просто виведе темніший з двох темних пікселів. Коли поширюють по цілого зображення, режими накладення можуть виробляти деякі приголомшливі ефекти.
Хоча Adobe Photoshop не винайшов режимів накладення, його реалізація, безумовно, сама наслідує. Але тепер, вам не потрібен Photoshop, щоб стилізувати ваше зображення таким чином, тому що ми можемо робити все це на льоту за допомогою CSS3.
Підтримка браузерами властивості background-blend-mode поліпшується. Ранні версії браузерів вимагали специфічного префікса і (або) активації експериментальних функцій. Але сайт caniuse.com повідомляє нам, що вже підтримують поточні версії Chrome, Firefox, Opera, і Safari. До сих пір немає ніяких ознак підтримки з боку IE, але так як це дуже прогресивне поліпшення, ми можемо починати користуватися ним.
Є кілька варіантів режиму накладення в рекомендаціях кандидатів CSS3, але найбільш корисним для наших цілей є background-blend-mode. Це властивість дозволяє змішати два зображення або зображення і колір фону.
Ось код, який потрібно: