CSS中，有一個很有用的技巧，就是可以通過使用文字上遮蓋的方法，在一個div上添加文字。這種方法可以通過許多方式來實現，下面將討論其中一些。

/* 方法1：使用position和z-index屬性 */
.div-bg {
position: relative;
height: 200px;
width: 200px;
background-color: #ccc;
}
.text-overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1; /* 大于div-bg的z-index值即可將其遮蓋 */
color: white;
font-size: 20px;
text-align: center;
vertical-align: middle;
}
<div class="div-bg">
<div class="text-overlay">
<p>Hello, World!</p>
</div>
</div>
/* 方法2：使用background-clip和text-fill-color屬性 */
.div-bg2 {
height: 200px;
width: 200px;
background-image: url('background.jpg');
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-fill-color: transparent;
}
<p>使用這種方法，我們可以在background-image屬性中指定一個背景圖片，并通過設置background-clip屬性為text，將背景圖片限定為只出現在文字的上面。</p>
<div class="div-bg2">
<p>Hello, World!</p>
</div>