資料結構
網路
關係資料庫管理系統
作業系統
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+ 次瀏覽
