How to add background to text by css
This article is about how css adds background to the text. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
Method: first of all, the HTML part, use the "" tag inside the file to add the content title that needs to be displayed; then start to define the CSS style to modify, the code is "body {layout; center; width.}"; finally, use the background-clip attribute to add a background picture to the text.
The operating environment of this tutorial: windows7 system, CSS3&&HTML5 version, Dell G3 computer.
Today we'll take a look at how to use CSS to add a background image to the text to make the text lively and beautiful! It is very useful when we want to create a large text title, but do not want to decorate it with ordinary and boring colors!
Let's first take a look at the effect picture:
Let's take a look at how this is achieved:
1. The first is the HTML section, which defines two headings
Pinduoduo training pinduoduo training
2. Then start defining css styles for embellishment:
Body {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; text-align: center; min-height: 100vh; font-size: 100px; font-family:Arial, Helvetica, sans-serif;}
3. Finally, add a background picture to the text:
Set the original color of the text to transparent transparent, and then use the background-image attribute to add a background picture to the text
H2 {color: transparent; background-image: url ("001.jpg");} h4 {color: transparent; background-image: url ("002");}
Found that the effect is like this, unsatisfactory. This is because a key attribute, background-clip, is missing. The background-clip attribute is a new CSS3 attribute that needs to be prefixed to be compatible with other browsers.
H2 {color: transparent; background-image: url ("001.jpg"); background-clip: text;-webkit-background-clip: text;} h4 {color: transparent; background-image: url ("002.jpg"); background-clip: text;-webkit-background-clip: text;}
Ok, it's done! The complete code is attached below:
Body {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; text-align: center; min-height: 100vh; font-size: 100px; font-family:Arial, Helvetica, sans-serif;} H2 {color: transparent; background-image: url ("001.jpg"); background-clip: text;-webkit-background-clip: text;} h4 {color: transparent Background-image: url ("002.jpg"); background-clip: text;-webkit-background-clip: text;} pinduoduo training pinduoduo training Thank you for reading! This is the end of the article on "how css adds background to the text". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
