![]() ![]() color: keeps hue and saturation of background-image and the luminosity of the background-color. saturation: keeps the saturation of the background-image whilst mixing the hue and luminosity of the background-color. hue: the result is the hue of the background-image combined with the luminosity and saturation of the background-color. exclusion: the result is very similar to difference yet with a little lower contrast. Often the image will have a very high contrast. difference: the result by subtracting the darker color of the background-image and the background-color from the lightest one. soft-light: the final result is similar to hard-light but softer in that it looks like a diffused spotlight has been placed on the image. hard-light: if the background-image is lighter than the background-color then the result is muliply or if it is lighter then the result is screen. color-burn: the background-color is inverted, divided by the background-image and inverted again. This is very similar to the screen blend mode. color-dodge: the background-color is divided by the inverse of the background-image. lighten: if the background-image is lighter than the background-color then the image is replaced, otherwise it is left as it was. darken: if the background-image is darker than the background-color then the image is replaced, otherwise it is left as it was. overlay: the background-color is mixed with the background-image to reflect the lightness or darkness of the backdrop. screen: both image and color is inverted, multiplied and then inverted again. multiply: the background-image and background-color are multiplied and typically this leads to a darker image than before. The value can be set as any of the following (in the demos below the background-color is red): normal: as shown above, the background-color will not bleed through the background-image. : a value that will change the background-image depending on its background-color.inherit: inherits the blend mode of the parent element.initial: the default value with no blending.But notice that the text color has not been affected by this additional property. On the right however, the blend mode has modified the background-image with the red background-color underneath. In the demo above, the default background-image on the left has no blend mode set and so the image overlaps the background-color.
0 Comments
Leave a Reply. |