Blending Modes on the Web
Layered blending modes are a great effect for raster images. An overlaid dark fill with the blending mode set to multiply is one simple way of adding a dark contrast to the entire image. To translate this effect to an image on the web, there are a few different techniques.
The easiest is to simply flatten the entire image with the blending layer. This will of course create a single image that will look the same in every browser, since it is just a single raster image. The downside is that if there are edits to the effect, or if the image needs to be changed, the original blending layer will need to be applied to the new or changed image. In some cases this may not be easy or feasible. For example, a client may not have access to the original blending layer or may not even have the software necessary to create a blending layer.
Another, more flexible approach, is to use the CSS3 features background-blend-mode or mix-blend-mode. Using one of these two features allows the use of the original unflattened image along with an overlaid fill or image, much like the way blending layers work in a raster image editor such as Photoshop. The advantage is that the image is always separate from the overlay and can be easily changed out. The overlay can also be edited without too much trouble.
The downside to using one of these CSS3 features is browser compatibility. Currently background-blend-mode is supported by all major browsers except IE & Edge. The same goes for mix-blend-mode. The good news is that if there is an opacity applied to the overlaid layer, IE & Edge will support that, they will just throw out the layer blend. In many cases, this is an acceptable alternative. In the cases where the effect is absolutely essential to be the same across all browsers, then flattening is the only option.