Comment ajouter un arrière-plan au texte en CSS-tutoriel CSS-php.cn

Comment ajouter un arrière-plan au texte en CSS

奋力向前

Libérer： 2023-01-07 11:47:40

original

12803 Les gens l'ont consulté

Méthode : 1. Utilisez "color: transparent" pour définir le texte comme étant transparent ; 2. Utilisez "background-image:url("image address")" pour ajouter une image d'arrière-plan au texte ; -clip: text;" Intégrez des images et du texte pour obtenir des effets d'arrière-plan de texte.

Comment ajouter un arrière-plan au texte en CSS

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Aujourd'hui, nous allons voir comment ajouter une image d'arrière-plan au texte en utilisant CSS pour 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 :

Étudions comment obtenir cet effet :

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

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

Copier après la connexion

2. Commencez ensuite à définir le css<. /code> style à modifier : <code>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;
}

Copier après la connexion

3、最后就是给文字添加背景图片：

将文字原本的颜色设置为transparent透明，然后利用background-image属性给文字加背景图片

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

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

Copier après la connexion

发现效果是这样的，不如人意。这是因为缺少了一个关键属性background-clip。background-clip属性是一个CSS3

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

Copier après la connexion

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

Définissez la couleur d'origine du texte sur transparent transparent, puis utilisez l'

background-image</ code> attribut au texte plus image d'arrière-plan<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;gutter:true;"><html>
<head>
<meta charset="utf-8">
<title></title>
<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(&quot;001.jpg&quot;);
	background-clip: text;
    -webkit-background-clip: text;
}

h3{
    color: transparent;
    background-image: url(&quot;002.jpg&quot;);
	background-clip: text;
    -webkit-background-clip: text;
}
</style>
</head>
&lt;body&gt;
	&lt;h1&gt;拼多多培训&lt;/h1&gt;
	&lt;h3&gt;拼多多培训&lt;/h3&gt;
&lt;/body&gt;
</html></pre><div class="contentsignin">Copier après la connexion</div></div><img src="https://img.php.cn/upload/article/000/000/065/5b7a16d98e08e60023e1e3ba478ea7a6-3.png" alt="" chargement="lazy ">Découvrez L'effet est comme ça, insatisfaisant. Cela est dû au fait qu'un attribut clé <code>background-clip

est manquant. L'attribut background-clip est un nouvel attribut CSS3 Vous devez ajouter un préfixe pour être compatible avec les autres navigateurs

rrreee

🎜 ok, vous avez terminé ! Le code complet est joint ci-dessous : 🎜rrreee🎜Apprentissage recommandé : 🎜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!