Blanda bilder

Det går att använda de vanligare lagerblandningsalternativen som man känner igen från Adobes program.

I exemplen nedan används två bilder som mixas ihop. Först på ena hållet och sen på andra.

Syntax

Det finns några olika sätt man kan blanda bilder på men alla använder i stort sett samma kod.

För inline-css:

<div style="background: url('https://www.malmolatin.se/img/ap104s3076.jpg'),url('https://www.malmolatin.se/img/%C3%B6h2014.jpg');background-size: cover;background-blend-mode: color-dodge;height: 200px; width:200px></div> ger resultatet:

De olika alternativen är:

blend-mode = normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Normal

Multiply

Screen

Overlay

Darken

Lighten

Color-dodge

Color-burn

Hard-light

Soft-light

Difference

Exclusion

Hue

Saturation

Color

Luminocity