How to add background to text in css-CSS Tutorial-php.cn

How to add background to text in css

奋力向前

Release： 2023-01-07 11:47:40

Original

12803 people have browsed it

Method: 1. Use "color: transparent" to set the text to be transparent; 2. Use "background-image:url("image address")" to add a background image to the text; 3. Use "background-clip: text;" blends pictures and text to achieve text background effects.

How to add background to text in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

Today we will take a look at how to use CSS to add a background image to the text to make the text vivid and beautiful! Very useful when we want to create a larger text title but don’t want to decorate it with ordinary and boring colors!
Let’s take a look at the renderings first:

Let’s study how to achieve this effect:

1. First, the HTML part, define two titles

<body>
	<h1>拼多多培训</h1>
	<h3>拼多多培训</h3>
</body>

Copy after login

2. Then start defining the css style for modification:

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;
}

Copy after login

3. Finally, add a background to the text Picture:

Set the original color of the text to transparenttransparent, and then use the background-image attribute to add a background image to the text

h1 {
    color: transparent;
    background-image: url("001.jpg");
}

h3{
    color: transparent;
    background-image: url("002");
}

Copy after login

I found that the effect is like this, which is not satisfactory. This is because a key attribute background-clip is missing. The background-clip attribute is a CSS3 new property, you need to add a prefix to be compatible with other browsers

h1 {
    color: transparent;
    background-image: url("001.jpg");
	background-clip: text;
    -webkit-background-clip: text;
}

h3{
    color: transparent;
    background-image: url("002.jpg");
	background-clip: text;
    -webkit-background-clip: text;
}

Copy after login

## ok, you're done! The complete code is attached below:







<body>
	<h1>拼多多培训</h1>
	<h3>拼多多培训</h3>
</body>

Copy after login

Recommended learning:

CSS video tutorial

The above is the detailed content of How to add background to text in css. For more information, please follow other related articles on the PHP Chinese website!