Maison > Article > interface Web > Comment ajouter une image d'arrière-plan au texte en utilisant du CSS3 pur

Comment ajouter une image d'arrière-plan au texte en utilisant du CSS3 pur

青灯夜游original: 2021-08-24 18:46:022835parcourir

Dans l'article précédent "Vous apprendre étape par étape comment utiliser CSS3 pour implémenter des effets dynamiques de survol et de clignotement des boutons", nous avons présenté la méthode d'utilisation de CSS3 pour ajouter des effets dynamiques aux boutons et obtenir une animation d'ombre clignotante et de survol des boutons. effet. Pour ceux qui sont intéressés Vous pouvez aller le découvrir ~

Aujourd'hui, nous allons voir comment utiliser CSS3 pour ajouter une image d'arrière-plan au texte afin de rendre le texte vivant et beau ! Très utile lorsque nous voulons créer un titre de texte plus grand mais que nous ne voulons pas le décorer avec des couleurs ordinaires et ennuyeuses !

Jetons d'abord un coup d'œil aux rendus :

Comment ajouter une image darrière-plan au texte en utilisant du CSS3 pur

Étudions comment obtenir cet effet :

Tout d'abord, la partie HTML , définissez deux titres

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

Comment ajouter une image darrière-plan au texte en utilisant du CSS3 pur

Ensuite, commencez à définir Modifier avec CSS style :

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

Comment ajouter une image darrière-plan au texte en utilisant du CSS3 pur

La dernière étape consiste à ajouter une image d'arrière-plan au texte :

Définissez la couleur d'origine du texte sur transparent, puis utilisez l'attribut background-image pour ajouter un arrière-plan image au texte

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

Comment ajouter une image darrière-plan au texte en utilisant du CSS3 pur

J'ai trouvé que l'effet est comme ça, ce qui n'est pas satisfaisant. En effet, il manque un attribut clébackground-clip. L'attribut background-clip est un nouvel attribut CSS3 Vous devez ajouter un préfixe pour être compatible avec les autres navigateurs

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

Comment ajouter une image darrière-plan au texte en utilisant du CSS3 pur

ok, vous avez terminé ! Le code complet est joint ci-dessous :

<!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>

Parce que nous utilisons des images statiques, l'effet d'image d'arrière-plan du texte est également statique. Si vous utilisez des animations, il y aura des effets dynamiques :

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

Comment ajouter une image darrière-plan au texte en utilisant du CSS3 pur

La plate-forme de sites Web chinois PHP propose de nombreuses ressources pédagogiques vidéo, invitez tout le monde à apprendre le "tutoriel vidéo CSS" !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Apprenez étape par étape à utiliser CSS3 pour obtenir des effets dynamiques de survol et de clignotement des boutons.Article suivant：Apprenez étape par étape à utiliser CSS3 pour obtenir des effets dynamiques de survol et de clignotement des boutons.

Articles Liés

Voir plus