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