How to Display Text on Image With CSS3 mix-blend-mode

Image backgrounds demeanour good behind vast arrangement texts. However, a CSS doing is not that straightforward. We can use a background-clip: text; property, however it’s still an experimental feature yet sufficient browser support.

The CSS choice to uncover an picture credentials behind a content is using a mix-blend-mode property. Blend modes for HTML elements are sincerely upheld conflicting all complicated desktop and mobile browsers with a difference of a few, such as Internet Explorer.

10 (More) CSS Tricks You Probably Overlooked

10 (More) CSS Tricks You Probably Overlooked

There are copiousness of CSS snippets that web developers can use to grasp certain results, and afterwards there…Read more

In this post, we’re going to see how mix-blend-mode (two of a modes specifically) works, and how we can use it to display a content with picture background in dual use cases:

  1. when a credentials picture can be seen by a text
  2. when a credentials picture runs around a text

See some examples in a demo subsequent (images are from unsplash.com).

The mix-blend-mode CSS skill defines how a content and a backdrop of an HTML member should blend together colorwise.

How to Use CSS3 Blending Mode [CSS3 Tips]

How to Use CSS3 Blending Mode [CSS3 Tips]

Note: This underline here requires enabling from a chrome://flags page for it to work. If we have ever…Read more

Have a demeanour during a list of consistent modes, out of that we’ll use multiply and screen in this post.

First, let’s demeanour into how these dual specific mix modes work.

How multiply screen mix modes work

Blending modes technically are functions that calculate a final tone value regulating a tone components of an member and a backdrop.

The multiply mix mode

In a multiply mix mode, a particular colors of a elements and their backdrops are multiplied, and a ensuing tone is practical to a final blended version.

The multiply mix mode is distributed according to a following formula:

B(Cb, Cs) = Cb × Cs

where:
Cb – Color member of a backdrop
Cs – Color member of a source element
B – Blending function

When Cb and Cs are multiplied, a ensuing tone is a mix of these dual tone components, and is as dim as a darkest of a dual colors.

To emanate a content picture background, we need to concentration on a box when Cs (the tone member of a source element) is either black or white.

If Cs is black a value is 0, a outlay tone will also be black, since Cb × 0 = 0. So, when a member is colored black, it doesn’t matter what tone a backdrop is, all we can see after consistent is black.

If Cs is white a value is 1, a outlay tone is whatever Cb is, becauseCb × 1 = Cb. So in this box we see a backdrop directly as it is.

The screen mix mode

The screen mix mode works likewise to a multiply mix mode, yet with a conflicting result. So, a black foreground shows a backdrop as it is, and a white forehead shows white with whatever backdrop.

Let’s fast see its formula:

B(Cb, Cs) = Cb + Cs - (Cb × Cs)

When Cs is black (0), a backdrop tone will be shown after a blending, as:

Cb + 0 - (Cb × 0) = Cb + 0 - 0 = Cb

When Cs is white (1) a outcome will be white with any backdrop, as:

Cb + 1 -(Cb × 1) = Cb + 1 - Cb = 1

1. Image shown by text

To arrangement content display by a credentials image, we use a screen mix mode with black text and white surrounding space.

div class="backdrop"
 p class="text"Water/p
/div
.backdrop {
 width: 600px; height: 210px;
 background-image: url(someimage.jpg);
 background-size: 100%;
 margin: auto;
}
.text {
 color: black;
 background-color: white;
 mix-blend-mode: screen;
 width: 100%;
 height: 100%;
 font-size: 160pt;
 font-weight: bolder;
 text-align: center;
 line-height: 210px;
 margin: 0;
}

Currently a content looks like below, in a subsequent step we’ll supplement tradition tone to a background.

Image Shown Through Text yet ColorImage Shown Through Text yet Color

Adding color

As we might’ve guessed by now, regulating mix modes leave us usually dual tone choices for a area that surrounds a content — black or white. However with white, it’s probable to supplement some tone to it using an overlay, if a conceal tone matches easily with a picture used.

To supplement tone to a surrounding area, supplement a div to a HTML for an overlay, and give it a background tone with high transparency. Also use a mix-blend-mode: multiply skill for a overlay, as it helps a credentials tone of a conceal to blend a bit better with a picture appearing inside text.

div class="backdrop"
 p class="text"Water/p
 div class="overlay"/div
/div
.overlay {
 background-color: rgba(0,255,255,.1);
 mix-blend-mode: multiply;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
}

With this technique, we could tone a surrounding area around a content with a picture background:

Image Shown Through Text with Blue BackgroundImage Shown Through Text with Blue Background

Note that a technique works good usually with subtle pure colors. If we use a entirely ambiguous color, or a tone that doesn’t compare with a image, a picture appearing inside a content will have a really manifest stain of a tone used, so unless it’s a demeanour that you’re going for, avoid ambiguous colors.

2. Text surrounded by picture background

Even yet a normal content chain over an picture credentials requires a same technique, I’m going to uncover we an instance of how a above demo looks like when a effect is reversed, i.e. when a content tone is white and a credentials is black.

.text {
 color: white;
 background-color: black;
 mix-blend-mode: screen;
 width: 100%;
 height: 100%;
 font-size: 160pt;
 font-weight: bolder;
 text-align: center;
 line-height: 210px;
 margin: 0;
}

You can use a same overlay in sequence to supplement some tone to a text, unless we wish to keep it white.

.overlay {
 background-color: rgba(0,255,255,.1);
 mix-blend-mode: multiply;
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
}

And subsequent we can see how a retreat box looks like:

Text Surrounded By ImageText Surrounded By Image

Note that in Internet Explorer, or any other browser that doesn’t support a mix-blend-mode property, a picture credentials won’t appear, and a content will sojourn black (or white).

Add Comment