Imagine If I use it for web and I can't use the blending modes
Now why would you go and say something silly like that? There's a few options you can choose from. A live example can be found here.
1. CSS background color + PNG
The easiest way is to just give the div a background color, combined with a semi-transparent PNG. Something like background: red url(semi-transparent.png);
2. CSS background stacking
Since you can add more than one background, separated by commas, you can easily blend semi-transparent PNGs. For example: background: url(image1.png), url(image2.png);
3. CSS pseudo-element trickery
If for some reason you don't want to stack backgrounds, for example because you want control of the positioning of each PNG, you can use the :before
and :after
pseudo-elements to stack semi-transparent PNGs.
4. CSS background-blend-mode
Works like this:
background-image: url(image.jpg);
background-color:red;
background-blend-mode: multiply;
Multiply is a nice and useful one, but there is also: screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, and luminosity. And also normal which will reset it.
5. CSS mix-blend-mode
Just position different elements on top of each other and use mix-blend-mode: multiply;
for example. Takes the same arguments as background-blend-mode as far as I can tell.
6. Canvas blend modes
Like so:
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.globalCompositeOperation = 'multiply';
7. SVG
You can specify a filter in the <defs>
like this:
<filter id="f1" x="0" y="0" width="1" height="1">
<feImage xlink:href="#p1" result="p1"/>
<feImage xlink:href="#p2" result="p2"/>
<feBlend mode="multiply" in="p1" in2="p2" />
</filter>
Number 5 (mix-blend-mode) should also work on SVG, so it's possible to use classes on the svg elements and set the blend mode with CSS.
8. CSS filters
With a bit of creativity, filters such as hue-rotate and brightness can be combined to achieve a coloured effect on an element.
I freely admit that some of these are more exotic and are not yet fully supported in all browsers. That shouldn't stop you from using them, as long as you ensure graceful degradation.
Further reading can be found here: