用 CSS 在圖片添加文字浮水印

有些站長會用影像處理軟體在照片上加上自己的網址或簽名，像是打上浮水印一樣，雖然難度不高，但反覆做起來也是挺煩人的，如果哪天想換一下簽名樣式、版權聲明，或更無奈的是網站搬家網址變更了，就得把照片一張張的翻出來重新製作一次…實在麻煩！

在這裡打上圖片說明

自定義文字，版權所有，盜用必究

🔥 CSS

.photo-cover{
position: relative;
display:inline-block;
}

.photo-cover p::before{
position: absolute;
content: "版權所有\FF0C盜用必究 ";
font-size: 16px; 
color: #fff;
text-shadow: 1px 1px 2px rgba(0,0,0,.44);
text-align: right;
font-family: Helvetica , Arial , sans-serif , serif;
font-weight:bold;
bottom:32px; 
right: 15px; 
z-index: 10;
opacity: .9;
}

//自訂義文字
.photo-cover p{
font-size: 16px; 
color: #efefef;
text-shadow: 1px 1px 2px rgba(0,0,0,.44);
text-align: right;
font-family: Helvetica , Arial , sans-serif , serif;
font-weight:bold;
position: absolute;
bottom:0px; 
right: 15px; 
z-index: 10;
}

🔥 HTML

<div class="photo-cover">
<img alt="" border="0" src=".png"/><p />
</div>