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

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

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

<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>

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