Some interesting CSS questions (16) -- wonderful background-clip: text, cssbackground-clip

Some interesting CSS questions (16) -- wonderful background-clip: text, cssbackground-clip

Start this series and talk about some interestingCSSQuestions and question types are not empty. What to think of is not only to broaden the problem-solving ideas, but also to involve CSS details that are easy to ignore.

Compatibility is not taken into consideration in solving the problem. The question is just a blank question. What do you think of? If you have the uncommon CSS attribute in solving the problem, please study it.

Update, update, and update important things three times.

Some interesting CSS questions (1) -- Implementation of the vertical bar on the left

Some interesting CSS questions (2) -- about the box model from the implementation of the striped border

Some interesting CSS questions (III)-How much do I know about the stacked sequence and stack context?

Some interesting CSS questions (4) -- Starting from reflection, talking about how CSS inherits inherit

Some interesting CSS questions (5) -- center a single row, center two rows to the left, and omit more than two rows

Some interesting CSS questions (6)-fully compatible multi-column uniform layout

Some interesting CSS questions (7) -- The Disappearing line

Some interesting CSS questions (8) -- The Tab switching solution for the pure CSS navigation bar

Some interesting CSS questions (9) -- cleverly implementing CSS diagonal lines

Some interesting CSS questions (10) -- structural pseudo-class selector

Some interesting CSS questions (11) -- reset.css

Some interesting CSS questions (12) -- In-depth discussion of CSS Feature Detection @ supports and Modernizr

Let's talk about some interesting CSS questions (13)-cleverly create a background color gradient animation!

Some interesting CSS questions (14) -- pause and play CSS animation in pure CSS mode!

Some interesting CSS questions (15th) -- wonderful background-clip: text

All questions are summarized in my Github.

The text starts from here. Startbackground-clipAnd many may be unfamiliar. Clip indicates trim, which is literally understood,background-clipThis means that the background is cropped.

I once talked about this attribute in the article about the implementation of the striped border model. If you are interested, let's look back.

In short,background-clipIt is used to set filling rules for the background (background image or color) of an element.

Andbox-sizingGenerally, it has three values:

{Background-clip: border-box; // The background is extended to the outer border (but below the border). background-clip: padding-box; // There is no background under the border, that is, the background is extended to the outer edge of the padding. Background-clip: content-box; // crops the background to the outer edge of the content-box .}

However, these are not the protagonists of this article. The main character of this article isbackground-clip: text;Of course, currently only chrome supports it, so you usually want to use it, you need-webkit-background-clip:text;.

 

What is -webkit-background-clip:text

This attribute is used to crop the text in a block as the cropping area. The text background is the background of the block, and all areas outside the text are cropped.

Look at the simplest Demo, not used-webkit-background-clip:text:

<div>Clip</div><style>div {  font-size: 180px;  font-weight: bold;  color: deeppink;  background: url($img) no-repeat center center;  background-size: cover;}</style>

The effect is as follows:

CodePen Demo

Use -webkit-background-clip:text

We will slightly transform the above Code and add-webkit-background-clip:text:

div {  font-size: 180px;  font-weight: bold;  color: deeppink;  background: url($img) no-repeat center center;  background-size: cover;  -webkit-background-clip: text;}

The effect is as follows:

CodePen Demo

Someone may be wondering when I see this. What is this? It's not just text settings.colorAttribute.

Set text to transparent color: transparent

Don't worry! Of course, it is even more interesting. The text color above blocks the background of the div block. What if I set the text to transparent? Text can be set to transparentcolor: transparent.

div {  color: transparent;  -webkit-background-clip: text;}

The effect is as follows (Please watch it in Chrome kernel Browser):

CodePen Demo

By setting the text to transparent, the background of the original div is displayed, and all areas of the text are cropped. This is-webkit-background-clip:text.

Various Effects

After learning about the basic usage, you can think about how to use this element to make some results.

 

Achieve text gradient effect

With this attribute, we can easily achieve the gradient effect of text.

The effect is as follows (Please watch it in Chrome kernel Browser):

CodePen Demo

 

Background gradient animation & text Cropping

Because it is usefulbackgroundProperties, recall, I cleverly made a background color gradient animation in the previous article! The gradient + animation is used to skillfully implement gradient animations for some backgrounds. It can be well combined with the knowledge in this article.

In combination with a gradient animation, of course, transition animation is not necessarily required. Here I use a frame-by-frame animation. Cooperation-webkit-background-clip:text, Implements a well, very red-light area feeling.

The effect is as follows (Please watch it in Chrome kernel Browser):

CodePen Demo

Image spying

Demonstrate one of these operations. Use the two div layers to set the same background image. Set the image blur on the parent div layer, and set the neutron div.-webkit-background-clip:textAnd then useanimationMove the sub-div to view the image.

The effect is as follows (Please watch it in Chrome kernel Browser):

CodePen Demo

 

In fact, there are a lot of interesting usage. As long as you dare to think about it and practice it, you will find that CSS is really a lot of fun.

Of course, many people will talk about the compatibility of this attribute. Indeed, I personally think the current ecosystem of the front-end is a bitFuture-oriented programming). However, in general, the advantage is greater than the disadvantage, and you can broaden your horizons.

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.