How to add background image to text using pure CSS3-CSS Tutorial-php.cn

How to add background image to text using pure CSS3

青灯夜游

Release： 2021-08-26 10:25:40

Original

2928 people have browsed it

In the previous article "Teach you step-by-step how to use CSS3 to implement dynamic effects of button hovering and flashing", we introduced the use of CSS3 to add dynamic effects to buttons and achieve a button hovering and flashing shadow animation effect. Friends who are interested can learn about the method~

Today we will take a look at how to use CSS3 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:

How to add background image to text using pure CSS3

Let’s study how to achieve this effect:

First is the HTML part, define two titles

<body>
  <h1>Hello world!</h1>
  <h3>Hello world!</h3>
</body>

Copy after login

How to add background image to text using pure CSS3

Then start defining css styles 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

How to add background image to text using pure CSS3

The last step is to add a background image to the text:

Set the original color of the text to transparent, and then use background-image Attributes add background images to text

h1 {
	color: transparent;
	background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
  
}
h3{
	color: transparent;
	background-image: url("https://img.php.cn/upload/article/000/000/024/6124c86e0808b298.jpg");
}

Copy after login

How to add background image to text using pure CSS3

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 new CSS3 attribute. You need to add a prefix to be compatible with other browsers

h1 {
	color: transparent;
	background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
	background-clip: text;
	-webkit-background-clip: text;
  
}
h3{
	color: transparent;
	background-image: url("https://img.php.cn/upload/article/000/000/024/6124c86e0808b298.jpg");
	background-clip: text;
	-webkit-background-clip: text;
}

Copy after login

How to add background image to text using pure CSS3

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			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;
			}

			h1 {
				color: transparent;
				background-image: url("https://img.php.cn/upload/article/000/000/024/612360451cede816.jpg");
				background-clip: text;
				-webkit-background-clip: text;

			}

			h3 {
				color: transparent;
				background-image: url("https://img.php.cn/upload/article/000/000/024/6124c86e0808b298.jpg");
				background-clip: text;
				-webkit-background-clip: text;
			}
		</style>
	</head>
	<body>
		<h1>Hello world!</h1>
		<h3>Hello world!</h3>
	</body>
</html>

Copy after login

Because we are using static images, the text background image effect is also static. If you use animations, there will be dynamic effects:

h3 {
   background-image: url("https://img.php.cn/upload/image/161/146/599/1629799857734746.gif"),
   url("https://img.php.cn/upload/image/817/380/291/1629799861847258.gif");
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

Copy after login

How to add background image to text using pure CSS3

PHP Chinese website platform has a lot of video teaching resources, welcome everyone to learn "css video tutorial 》!

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