本文目錄導(dǎo)讀：

1. 使用CSS添加簡單水印
2. 使用CSS制作透明水印

CSS圖片水印制作指南

在網(wǎng)頁設(shè)計中，我們經(jīng)常需要給圖片添加水印，以保護(hù)圖片的版權(quán)或者提供額外的信息，使用CSS，我們可以輕松地給圖片添加水印，而無需使用額外的圖片處理軟件。

使用CSS添加簡單水印

我們可以使用CSS的position和div元素來創(chuàng)建一個簡單的圖片水印，假設(shè)我們有一張圖片，路徑為image.jpg，我們可以這樣寫：

<div style="position: relative; width: 500px; height: 300px;">
    <img src="image.jpg" style="width: 100%; height: 100%;">
    <div style="position: absolute; top: 10px; left: 10px; color: #fff; font-size: 24px;">
        Watermark Text
    </div>
</div>

在這個例子中，我們創(chuàng)建了一個包含圖片和水印文本的容器，圖片填充整個容器，而水印文本則定位在容器的左上角，我們可以調(diào)整top和left屬性來移動水印文本的位置，或者使用其他CSS屬性來樣式化水印文本。

使用CSS制作透明水印

除了簡單的水印文本，我們還可以使用CSS制作透明的水印圖片，假設(shè)我們有一張透明的水印圖片，路徑為watermark.png，我們可以這樣寫：

<div style="position: relative; width: 500px; height: 300px;">
    <img src="image.jpg" style="width: 100%; height: 100%;">
    <img src="watermark.png" style="position: absolute; top: 10px; left: 10px; opacity: 0.5;">
</div>

在這個例子中，我們添加了一個透明的水印圖片到容器中，通過調(diào)整top和left屬性，我們可以改變水印圖片的位置，我們使用opacity屬性來降低水印圖片的透明度，以使其更加透明。

使用CSS給圖片添加水印是一種簡單而有效的方法，可以保護(hù)圖片的版權(quán)并提供額外的信息，無論是簡單的水印文本還是透明的水印圖片，CSS都可以輕松實(shí)現(xiàn)，希望這篇文章能幫助你學(xué)會如何使用CSS給圖片添加水印。