So fügen Sie einem Text in CSS einen Hintergrund hinzu-CSS-Tutorial-php.cn

So fügen Sie einem Text in CSS einen Hintergrund hinzu

奋力向前

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

Original

12722 Leute haben es durchsucht

Methode: 1. Verwenden Sie „color: transparent“, um den Text transparent zu machen. 2. Verwenden Sie „background-image:url(„image address“)“, um dem Text ein Hintergrundbild hinzuzufügen -clip:text;" Integrieren Sie Bilder und Text, um Texthintergrundeffekte zu erzielen.

So fügen Sie einem Text in CSS einen Hintergrund hinzu

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Heute werfen wir einen Blick darauf, wie man mit CSS ein Hintergrundbild zu Text hinzufügt, um den Text lebendig und schön zu machen! Sehr nützlich, wenn wir einen größeren Texttitel erstellen, ihn aber nicht mit gewöhnlichen und langweiligen Farben dekorieren möchten!
Werfen wir zunächst einen Blick auf die Darstellungen:

Lassen Sie uns untersuchen, wie Sie diesen Effekt erzielen:

1. Zuerst ist der HTML-Teil, definieren Sie zwei Titel

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

Nach dem Login kopieren

2. Beginnen Sie dann mit der Definition von css< /code> Stil zum Ändern: <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;
}

Nach dem Login kopieren

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

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

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

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

Nach dem Login kopieren

发现效果是这样的，不如人意。这是因为缺少了一个关键属性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;
}

Nach dem Login kopieren

3. Der letzte Schritt besteht darin, dem Text ein Hintergrundbild hinzuzufügen:

Setzen Sie die Originalfarbe des Textes auf transparent transparent und verwenden Sie dann das

Hintergrundbild</ code> Attribut zu Text plus Hintergrundbild<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">Nach dem Login kopieren</div></div><img src="https://img.php.cn/upload/article/000/000/065/5b7a16d98e08e60023e1e3ba478ea7a6-3.png" alt="" loading="lazy ">Entdecken Der Effekt ist so, unbefriedigend. Dies liegt daran, dass ein Schlüsselattribut <code>background-clip

fehlt. Das background-clip-Attribut ist ein neues CSS3-Attribut. Sie müssen ein Präfix hinzufügen, um mit anderen Browsern kompatibel zu sein

rrreee

🎜 ok, fertig! Der vollständige Code ist unten angehängt: 🎜rrreee🎜 Empfohlenes Lernen: 🎜CSS-Video-Tutorial🎜🎜

Das obige ist der detaillierte Inhalt vonSo fügen Sie einem Text in CSS einen Hintergrund hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!