在web開發中，將文字放在背景圖片上是一個常見的需求。這可以用來強調某些特定信息，讓設計變得更有層次感。CSS中有一些方法可以幫助我們實現這一目的。 首先，我們可以使用CSS的background-image屬性來設置一個背景圖片。例如： pre{ background-image: url('background.jpg'); } 接下來，我們可以使用CSS的::before偽元素將文字內容添加到背景圖片上。例如： pre::before{ content: 'Hello, World!'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 這段代碼會在pre元素的背景圖片上添加一段文字，這段文字在垂直和水平方向上都居中。 在上面的代碼中，我們使用了絕對定位來將文字居中。我們首先將內容添加到HTML中，然后使用position屬性將其定位在parent元素的中心位置。由于我們想要水平和垂直居中，我們使用了transform屬性，將文字框向左和向上移動。 需要注意的是，在使用這種方法時，背景圖片需要具有足夠的對比度，以確保文字清晰可見。如果圖片過于繁忙或色調過深，則文字可能無法清晰地顯示。 在實際應用中，我們可以結合使用 ::before 偽元素和CSS選擇器來實現更加復雜的布局和樣式。這些方法可以使網站更加美觀和易于使用。