The way images that overlap blend with each other is important in image production for creating various interesting effects. That is why most image editing programs (e.g., Photoshop) provide the command for doing this. In CSS, the properties provided to manage image blending are background- blend-mode, mix-blend-mode, and isolation.
1. background-blend-mode
The background-blend-mode property allows you to specify how an element’s background image blends with the one below it and the element’s background color, including gradient. The content behind the element is unaffected. The property is non-inherited and takes one value, which specifies the blending mode to apply. Figure 16.20 shows an image and the available CSS blending modes and their effects on a gray background color. The normal blending mode is the default and shows the actual appearance of the image.
Figure 16.21 shows how the background-blend-mode property is used. It is the code used to produce the examples in Figure 16.20, with the value of the property changed as necessary. Note that the background of the image is transparent. In the example, the background-image property specifies the background image for the <body> element, background-repeat says not to repeat it, background-color specifies a gray background, and background- blend-mode specifies the multiply blending mode.
When multiple blending modes are specified, they are applied in the same order as the images specified by the background-image property. The image specified first occupies the topmost layer. This means that in Figure 16.22, overlay specifies how the first gradient blends with the second; multiply specifies how the second gradient blends with the third; screen specifies how the third gradient blends with the first image; difference specifies how the first image blends with the second, and because no value is specified for how to blend the second image with the third, the browser starts from the beginning of the list of values again, that is, it uses overlay. Figure 16.23 shows the effect of the code. Note that changing the order in which the images are specified will also change the blending result.
2. mix-blend-mode
The mix-blend-mode property allows you to specify how an element’s content should blend with the content and background of the element below it. It is non-inherited and, like the background-blend-mode property, takes one value, which is the blending mode to apply and can be any of those in Figure 16.20. Figure 16.24 shows how the property is used and Figure
In the example, the div{} rule specifies the background image; says not to repeat it; says to center any content of the <div> element; and specifies the size of the element to make it the same as that of the background image so that when content is centered in the element it is also centered in the background image. The img{} rule blends the image specified in the <img> element with the background image.
3. isolation
The isolation property is usually used in conjunction with the mix-blendmode property and allows you to isolate elements from a group of blended elements. It is non-inherited and the values it takes are auto (which means no isolation, and is the default) and isolate (which says to isolate element from blend group). Figure 16.26 shows how it is used and Figure 16.27 shows the result when isolation is not used and when it is used. The div{} rule positions the images at the same point to make them overlap. The img{} rule blends all the images, and the .three{} rule isolates the third- bottom) image.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.