How to Display Text on Image With CSS3 mix-blend-mode
Image backgrounds look great behind large display texts. However, its CSS implementation is not that straightforward. We can use the background-clip: text; property, however it’s still an experimental feature without sufficient browser support.
The CSS alternative to show an image background behind a text is using the mix-blend-mode property. Blend modes for HTML elements are fairly supported across all modern desktop and mobile browsers with the exception of a few, such as Internet Explorer.
where: Cb – Color component of the backdrop Cs – Color component of the source element B – Blending function
When Cb and Cs are multiplied, the resulting color is a blend of these two color components, and is as dark as the darkest of the two colors.
To create our text image background, we need to focus on the case when Cs (the color component of the source element) is either black or white.
If Cs is black its value is 0, the output color will also be black, because Cb × 0 = 0. So, when the element is colored black, it doesn’t matter what color the backdrop is, all we can see after blending is black.
If Cs is white its value is 1, the output color is whatever Cb is, becauseCb × 1 = Cb. So in this case we see the backdrop directly as it is.
The screen blend mode
The screen blend mode works similarly to the multiply blend mode, but with the opposite result. So, a black foreground shows the backdrop as it is, and a white foreground shows white with whatever backdrop.
Currently our text looks like below, in the next step we’ll add custom color to the background.
As you might’ve guessed by now, using blend modes leave us only two color choices for the area that surrounds the text — black or white. However with white, it’s possible to add some color to it using an overlay, if the overlay color matches nicely with the image used.
To add color to the surrounding area, add a <div> to the HTML for an overlay, and give it a background color with high transparency. Also use the mix-blend-mode: multiply property for the overlay, as it helps the background color of the overlay to blend a bit better with the image appearing inside text.
With this technique, we could color the surrounding area around the text with the image background:
Note that the technique works well only with subtle transparent colors. If you use a fully opaque color, or a color that doesn’t match with the image, the image appearing inside the text will have a very visible tint of the color used, so unless it’s a look that you’re going for, avoid opaque colors.
2. Text surrounded by image background
Even though a normal text placement over an image background requires the same technique, I’m going to show you an example of how the above demo looks like when the effect is reversed, i.e. when the text color is white and the background is black.