對(duì)于網(wǎng)頁中的圖片，往往存在一些要求。比如，需要加上水印以保護(hù)版權(quán)，或者添加一些文字說明。那么如何實(shí)現(xiàn)在圖片上添加水印或者文字呢？這時(shí)，css就可以派上用場(chǎng)了。 首先，我們需要在HTML中添加一張圖片。代碼如下：

<img src="image.jpg" alt="圖片">

這時(shí)候，我們會(huì)發(fā)現(xiàn)圖片會(huì)覆蓋在文字上，而文字無法看到。那么怎么在圖片上添加水印或者文字呢？ 我們可以通過css來控制圖片，并在圖片上添加水印或文字。在css中，我們可以通過position和z-index屬性來控制圖片與文本的層次關(guān)系。比如，將圖片的z-index值設(shè)為-1，就可以讓圖片置于文字下面。同時(shí)，我們可以通過設(shè)置opacity屬性或者添加透明背景來實(shí)現(xiàn)水印效果。下面是一個(gè)示例代碼：

<style>
/* 圖片樣式 */
img {
position: relative;
z-index: -1;
}
/* 水印樣式 */
.watermark {
position: absolute;
z-index: 1;
opacity: 0.5;
background: transparent url(watermark.png) repeat;
}
</style>
<p>這是一段文字</p>
<img src="image.jpg" alt="圖片">
<div class="watermark"></div>

在上面的代碼中，我們使用了一個(gè)空的div元素來作為水印。通過設(shè)置div的class為watermark，并在css中設(shè)置其樣式，我們就添加了一個(gè)水印效果。其中，opacity為0.5表示水印的透明度為50%，background則指定了水印的樣式。 總結(jié)一下，通過css的position和z-index屬性，我們可以控制圖片和文本的層次關(guān)系，從而實(shí)現(xiàn)在圖片中添加水印或文字的效果。同時(shí)，我們可以通過設(shè)置opacity屬性或者添加透明背景來實(shí)現(xiàn)水印效果。