Shulou(Shulou.com)06/01 Report--

This article mainly shows you "CSS/CSS3 how to achieve text texture overlay effect", the content is easy to understand, clear, hope to help you solve doubts, the following let Xiaobian lead you to study and learn "CSS/CSS3 how to achieve text texture superposition effect" this article.

1. CSS/CSS3 realizes text texture overlay

The HTML and CSS codes are as follows:

CSS texture overlay. Pattern-overlay {font-size: 60px; font-family: 'microsoft yahei'; background-image: url (. / pattern01.jpg);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}. Pattern-overlay > span {position: linear-gradient (to bottom, # f00, # f00); mix-blend-mode: overlay;-webkit-text-fill-color: transparent -webkit-background-clip: text;} .pattern-overlay > span::before {content: attr (data-text);}

You can achieve an effect similar to the following (red gradient and gray stone texture superposition effect):

You can click here: CSS to achieve the texture overlay effect of the text demo

On the demo page, we can adjust the beginning and end color of the gradient image, or change our texture image, all of which can be rendered in real time:

Realization principle

In webkit browsers, you can use the following CSS combination to display text in the background:

.fill-bg {- webkit-text-fill-color: transparent;-webkit-background-clip: text;}

Can be used to achieve text gradient, or similar to the home page text streamer and other effects.

Therefore, we use two layers of tags to clearly fill the gradient background and texture background, and then use the CSS3 blending mode mix-blend-mode:overly to overlay the two layers of tags, and the effect is achieved!

Compatibility

Webkit kernel browser, Chrome,Safari and so on are supported.

Instructions on why you don't use background-blend-mode

In theory, it is easiest to mix modes with the most background images in background-blend-mode, because only one layer is needed, and the theoretical support code is as follows:

CSS texture overlay. Pattern-overlay {font-size: 60px; font-family: 'microsoft yahei'; background-image: linear-gradient (to bottom, # f00, # f00), url (. / pattern01.jpg); background-blend-mode: overlay;-webkit-text-fill-color: transparent;-webkit-background-clip: text;}

There is no problem with background gradient and texture overlay itself, and the effect is as follows:

But when the background-clip:text declaration is applied, the blending mode is ignored, so the final text has no superposition effect. Therefore, it uses two separate layers of tags to apply mix-blend-mode to overlay the method.

/ / zxx: CSS3 naturally supports mixed mode, see this article: "introduction to CSS3 mixed mode mix-blend-mode/background-blend-mode", where mix-blend-mode is the mixing between elements and background-blend-mode is the mixing between background images.

Second, use SVG to achieve more compatible text texture overlay effect.

The CSS3 method is the easiest to understand and the fastest to get started, but neither Firefox nor IE browsers support it, so it can only be used on the mobile end. If we want to be compatible with PC browsers, we can try to use SVG to implement it, as shown below:

SVG texture overlay

The red and green gradient overlays the texture of the stone, and the final effect is as follows:

You can click here: SVG to achieve the texture overlay effect of the text demo

Realization principle

There is a filter element associated with mixed mode in SVG called, so we can define an overlay mix between the referenced in= (in= "SourceGraphic") and the image (in2= "patternSource") (mode= "overlay").

SVG text can fill not only color, but also texture, so we need a gradient and texture material mixed element, very simple, a rectangular element with the same size as SVG, use gradient fill, apply overlay filter, as texture.

As a result, the effect is achieved!

Compatibility

Chrome, Safari and Firefox browsers all support it.

If you visit our demo page under the IE browser, you will see that the texture is not overlaid, that is because the IE browser only supports a few blending modes mentioned in the specification, including: normal,multiply,screen,darken,lighten. There is no superimposed overlay.

Therefore, if you want the SVG texture overlay effect to be fully IE9+ compatible, you can try using the positive overlay mixing mode-multiply, for most users, there is no difference.

Third, use canvas to realize texture superposition effect.

Canvas does not have a ready-made mixed mode api, so if you want to achieve the superposition effect, you need to recalculate the method through the algorithm. All kinds of algorithms about mixed mode are actually public, and you can find them by searching them.

In this article, canvas's mixed-mode effect uses an open source JS method, the project address is: https://github.com/Phrogz/context-blender

The uncompressed state of JS is less than 9K, and all kinds of mixed modes are supported.

Therefore, it is much easier to use canvas to achieve texture overlay.

The following is a screenshot of the implemented effect:

You can click here: canvas to achieve the texture overlay effect of the text demo

Similarly, we can modify the gradient color and modify the texture image to see other rendering effects, for example, we choose a local paper image as the texture:

Realization principle

Draw the JS code as follows:

/ / introduce context_blender.js first, and then. / / canvas rendering script var canvas = document.querySelector ('canvas'); var context = canvas.getContext (' 2d'); var width = canvas.width, height = canvas.height;context.textBaseline = 'middle';context.font =' bold 60px "Microsoft Yahei"'; / / painting method var draw = function () {context.clearRect (0,0, width, height); / / gradient and texture var gradient, pattern;// create material canvasvar canvasPattern = document.createElement ('canvas') Var contextUnder = canvasPattern.getContext ('2d'); canvasPattern.width = width; canvasPattern.height = height;// create gradient canvasvar canvasGradient = document.createElement (' canvas'); var contextOver = canvasGradient.getContext ('2d'); canvasGradient.width = width; canvasGradient.height = height;// draw gradient object gradient = contextOver.createLinearGradient (0,0,0, height); gradient.addColorStop (0, red); gradient.addColorStop (1, red) / / texture object, img refers to texture image object pattern = contextUnder.createPattern (img, 'no-repeat'); contextUnder.fillStyle = pattern; contextUnder.fillRect (0,0, width, height); / / apply gradient contextOver.fillStyle = gradient; contextOver.fillRect (0,0, width, height); / / overlay canvascontextOver.blendOnto (contextUnder,' overlay'); / / create patternpattern = context.createPattern (canvasPattern, 'no-repeat') for the current context / / draw text context.fillStyle = pattern; context.fillText ('canvas texture overlay', 0,60);}

Principle description:

Temporarily create a canvas to draw a gradient, temporarily create a canvas filled with texture images, two canvas superimposed and mixed to get a new canvas, and then the text on the canvas on the page will fill the superimposed and mixed canvas as a texture, and the effect will be achieved.

Compatibility

IE9+,Chrome, Safari and Firefox browsers all support it.

The above is all the content of the article "how to achieve text texture overlay effect in CSS/CSS3". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.