To add color to the surrounding area, add a to the HTML for an overlay, and give it a background color with high transparency. 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. Adding colorĪs 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. To display text showing through its background image, we use the screen blend mode with black text and white surrounding space.Ĭurrently our text looks like below, in the next step we’ll add custom color to the background. When Cs is white (1) the result will be white with any backdrop, as:Ĭb + 1 -(Cb × 1) = Cb + 1 - Cb = 1 1. When Cs is black (0), the backdrop color will be shown after the blending, as: So, a black foreground shows the backdrop as it is, and a white foreground shows white with whatever backdrop.
The screen blend mode works similarly to the multiply blend mode, but with the opposite result. So in this case we see the backdrop directly as it is.
If Cs is white its value is 1, the output color is whatever Cb is, because Cb × 1 = Cb. 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 black its value is 0, the output color will also be black, because Cb × 0 = 0. 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. 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. The multiply blend mode is calculated according to the following formula:Ĭs – Color component of the source element In the multiply blend mode, the individual colors of the elements and their backdrops are multiplied, and the resulting color is applied to the final blended version. How multiply & screen blend modes workīlending modes technically are functions that calculate a final color value using the color components of an element and its backdrop. Have a look at the list of blending modes, out of which we’ll use multiply and screen in this post.įirst, let’s look into how these two specific blend modes work. The mix-blend-mode CSS property defines how the content and the backdrop of an HTML element should blend together colorwise. See the Pen Text with Image Background by HONGKIAT on CodePen. See some examples in the demo below (images are from ). Read Also: 10 (More) CSS Tricks You Probably Overlooked when the background image runs around the text.when the background image can be seen through the text.In this post, we’re going to see how mix-blend-mode (two of its modes specifically) works, and how you can use it to display a text with image background in two use cases: 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. The CSS alternative to show an image background behind a text is using the mix-blend-mode property. We can use the background-clip: text property, however it’s still an experimental feature without sufficient browser support. However, its CSS implementation is not that straightforward. Image backgrounds look great behind large display texts.
0 kommentar(er)
