Blending

With this group of parameters you can overlay colors (more to come) on top of your images.

Contents

  1. Blend Modes
  2. Blend Color

Blend Modes

Blend modes gives you control over how color interactions are done between the base base image and the overlay. The result is similar to what you would find on popular software like Adobe® Photoshop® or GIMP.

Available Options

blend-mode source, over, in, out, atop, dest, dest-over, dest-in, dest-out, dest-atop, xor, add, saturate, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference and exclusion.


Syntax Example

blend-mode:multiply



blend-mode:color-burn

blend-mode:saturate

blend-mode:screen



Blend Color

It's the color overlaying your base image, used in combination with blend-mode.

Available Options

blend-color any hexdecimal color (i.e: ff0000).

Examples





Using ImageBoss Web Library

<img
    src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="
    data-imageboss-src="/examples/02.jpg"
    data-imageboss-operation="width"
    data-imageboss-options="blend-mode:color-burn,blend-color:ff0000"
    width="700"
/>