Fantastic background-clip:text

When we are learning CSS3, a background attribute background-clip is used to clip the background, that is, to specify the area where the background is drawn. Usually we use several attributes as follows:

value	illustrate
border-box	Defaults. The background is drawn inside the border box (clip into the border box).
padding-box	The background is drawn inside the padding box (clip into the padding box).
content-box	The background is drawn inside the content box (clip into the content box).

We won’t go into details about these attribute values, and children’s shoes that are not clear can check the information and experiment by themselves.

Occasionally, it is found that the background-clip attribute also has a non-standard value text, which is used to specify the drawing area of ​​the background as the foreground text area of ​​the specified area (Non-standard method of clipping a background image to the foreground text.), after caniuse ( https ://caniuse.com/ ) website query, found that basically all browsers currently support it. In some old versions of Google or Firefox browsers, we can use the prefix -webkit-.

Examples are as follows:

<p class="testclip">我的背景是图片</p>

.testclip{
    font-size:90px;
    font-weight:900;
    background-image:url('/images/1.png');
    background-size:cover;
}

We browse the page without adding the background-clip attribute, and the effect is as follows:

Let's add attributes, and the css code is modified as follows:

.testclip{
    font-size:90px;
    font-weight:900;
    background-image:url('/images/1.png');
    background-clip:text;
    -webkit-background-clip:text;
    background-size:cover;
}

After adding the attributes, do you feel a little excited? Test it and see, the effect is not good, not the effect we want, as shown in the figure below:

What's the matter?

Think about it, the text is colored, and the default is the color inherited from the parent container, black. Suddenly, how about changing the background color to a transparent color?

So we add transparent color to the css code as follows:

.testclip{
    font-size:90px;
    font-weight:900;
    background-image:url('/images/1.png');
    background-clip:text;
    -webkit-background-clip:text;
    background-size:cover;
    color:transparent;
}

Browse again, the effect is as follows:

Isn’t it cool, you don’t need to trouble Photoshop for these small problems in the future