数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 CSS 将文本作为背景？
通常，我们使用文本作为前景而不是背景，因为文本对于任何网站来说都是最重要的内容，并且在前端组织文本以具有良好的可见性、可读性和字体以展示给用户也很重要。但是，有时您需要将文本作为其他文本或 HTML 元素的背景显示，其中包含一些内容。在这种情况下，您可以使用 CSS 的 z-index 属性以及不同的属性来将文本显示为背景。如下所列，有两种不同的方法可以使用 **z-index** 属性和其他属性和选择器来使用 CSS 将文本显示为背景 -
将其与父元素为相对定位的绝对定位元素一起使用。
将其与 :before 或 :after 伪选择器或元素一起使用。
现在，我们已经看到了可以使用 z-index 属性的方法。现在让我们详细了解它们，并借助代码示例进行理解。
使用绝对定位元素
绝对定位元素可以放置在其父元素或具有 position 属性值为 relative 的祖先元素内部。如果绝对定位元素没有任何祖先，则它将 body 元素视为祖先并根据它进行定位。这些元素甚至可以重叠。
语法
以下语法将显示如何使用绝对定位元素将文本用作背景 -
.parentElement {
Position: relative;
}
childElement {
position: absolute;
}
现在，让我们借助代码示例详细了解此方法的实际实现。
步骤
**步骤 1** - 在第一步中，我们将定义一个容器元素，并使用一个类包含其中的所有前景和背景文本元素。
**步骤 2** - 在下一步中，我们将定义一些 HTML 元素，这些元素包含将在前景和背景中显示的文本，并使用不同的类与之关联，以提供不同的 CSS。
**步骤 3** - 在最后一步中，我们将使用 **position: absolute** 属性将 CSS 应用于必须将文本显示为背景的元素。
示例
以下示例将说明上述算法以及如何使用绝对定位元素将文本显示为背景 -
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.bg_text {
position: absolute;
top: 50%;
z-index: -1;
opacity: 0.3;
color: grey;
transform: rotate(320deg);
}
.bg_text-1 {
left: 10%;
}
.bg_text-2 {
left: 50%;
}
.bg_text-3 {
left: 90%;
}
</style>
</head>
<body>
<center>
<div class = "container">
<h2>Use text as background using CSS</h2>
<p>The <b> absolutely positioned </b> element is used to show the text as background of this text.</p>
<p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms. </p>
<p class = "bg_text bg_text-1">Tutorialspoint </p>
<p class = "bg_text bg_text-2">Tutorialspoint </p>
<p class = "bg_text bg_text-3">Tutorialspoint </p>
</div>
</center>
</body>
</html>
在此示例中，我们使用了 z-index 属性以及绝对定位元素来显示其包含的文本作为背景文本，以及其他 CSS 属性。
使用 :before 或 :after 伪元素
:before 和 :after 伪元素是可以让我们在现有元素之前添加任何类型的内容，而无需在 HTML 中添加额外的标记或元素。
语法
以下语法将显示如何使用 :before 和 :after 伪元素将文本显示为背景 -
.htmlElement1:before {
content: any text you want to display as background text
}
.htmlElement2:after {
content: any text you want to display as background text
}
现在让我们借助代码示例了解此方法的实际实现。
步骤
**步骤 1** - 在第一步中，我们将定义一个容器元素，该元素将包含所有元素，并具有 **position: relative** CSS 属性。
**步骤 2** - 在下一步中，我们将定义两个不同的元素，并使用两个不同的类来显示它们后面的背景文本。
**步骤 3** - 在最后一步中，我们将使用上一步中定义的元素的不同类来在这些元素上使用 -before 和 -after 伪元素，并使用 CSS 显示背景文本。
示例
以下示例将解释上述算法以及如何使用 :before 和 :after 伪元素显示背景文本 -
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
}
.pseudo {
width: 500px;
}
.pseudo-before:before {
content: "Tutorialspoint";
position: absolute;
transform: rotate(320deg);
color: grey;
opacity: 0.3;
left: 50%;
z-index: -1;
}
.pseudo-after:after {
content: "Tutorialspoint";
position: absolute;
transform: rotate(320deg);
color: grey;
opacity: 0.3;
left: 50%;
z-index: -1;
}
</style>
</head>
<body>
<center>
<div class = "container">
<h2>Use text as background using CSS</h2>
<p>The <b> :before and :after pseudo elements </b> are used to show the text as background of below text.</p>
<p class = "pseudo pseudo-before"> <b> Background text shown using before element. </b> <br> Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p>
<p class = "pseudo pseudo-after"> <b> Background text shown using after element. </b> <br> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more.</p>
</div>
</center>
</body>
</html>
在上面的示例中，我们使用了 :before 和 :after 伪元素以及 z-index CSS 属性，并将它们相对于其父元素绝对定位以定义其位置，并使用其他一些 CSS 属性来显示给定内容作为背景文本。
结论
在本文中，我们学习了两种使用 CSS 属性将文本显示为背景的不同方法。我们通过在代码示例中实际实现这些方法，详细讨论了这两种方法。您可以使用任何您选择的方法，将任何文本显示为背景，同时构建交互式 UI。使用伪元素方法是有效的，因为它们不会在 HTML 文档中添加任何额外的标记，也不会中断文档。
1K+ 次浏览
