用 CSS 在圖片添加文字浮水印
有些站長會用影像處理軟體在照片上加上自己的網址或簽名,像是打上浮水印一樣,雖然難度不高,但反覆做起來也是挺煩人的,如果哪天想換一下簽名樣式、版權聲明,或更無奈的是網站搬家網址變更了,就得把照片一張張的翻出來重新製作一次…實在麻煩!
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZMFnevCk9lF8OlLUqG2yhCec8EYODMu9V73Vi5RnlPXxazB8ByY8l_ULxZyPKdLfW9Elpt_k75DQ1JmBsxoUDgQFGwgvwHGIDADI4mf4UKfVJf-8l1MOaeyxNVH1wNFnwb2whH9HKs5cLOz0a2iOqiDW9x-9gOSeC_xDzkPITLWQLL_tm_n0SU9CzxuA/s1600/220206-H-1024x683.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhux5Tvs0NYto-jHGPYjQrLfxxMERhvqlq_jRHYRAfABay-42i0-VepfGRaNrChPiHWpsGH9RKJvmYeLlxSgHZky2X1K13mkLM_IJpQEAusgfg2u5iKMMpyWoQj9A1w9R0Mmnrxz9CsxVp8ttHL6Dtm82Ia6-xpBwAe2M01MWAp1QnxyFSelfZp39jL73g/s1600/15b7bd26753bc070096bbc3078ecca5e-1350x900.jpg)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXWGHVsC_f3t2SBexyUby-mMdXim0g77x_zMnYgQoeS9V4psTQ-yMTdoNuD3dnJuPC7pLsNYU5hgSP4AHyus0p-cSE0qHLyYyQ8s4cU2tu1V5gGW3EAFrZdenDD5qCP86LgJdbzsZK1xrBPpqxI3NP37YJhtnZPZeC4wNqk6ft3kTLwMKksG8V8r7Cez4/s1600/the-feast-time-square-olivie-garden.webp)
在這裡打上圖片說明
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFmgYT6pjzFwBBZb4Va_R0DUDPfHWpqC-8y83E84N_e0qMG_SOy7ri_Su2UaW441ckHUZUPVQiY9dMWtrWHXwmOakm8Ewywd02zjlW-sJ1HLuJmg06BkjiLfQQU6d1htMBEZOWmY_oYUu4OOIlnk-peAgwwCmzX1roE-de5k5FBneRPm3k-ZVzScg4JKg/s1600/51424.jpg)
自定義文字,版權所有,盜用必究
🔥 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>