用 CSS 替照片加護貝

[懶人拍照] 用 CSS 替照片加護貝

有時候我們不太喜歡自己分享的照片 在未經知會的情形下， 三兩下的就被滑鼠右鍵複製 或者更直接的，把照片拖曳到讀者的桌面 雖然 google 一下， 就會找到很多很多的 Javascript 來防賭這樣的情形 但又覺得那些語法很困難， 一旦有了問題不知道怎麼調整 而且很可能還會有其他的副作用 實在有些傷腦經 在上一篇文章裡， 我們提到了用 CSS 背景圖層的概念， 替照片加上一些提醒圖樣 沿用相同邏輯， 我們也可以用 CSS 替你的照片加上一層保護 就像是替照片加上一層護貝那樣 也像是替你的 PDA 螢幕貼上一層透明保護膠膜 動手試試看吧 :) 首先， 我們製作一張完全透明的 gif 圖檔(圖檔大小 1px寬*1px高就行了)， 命名為：spacer.gif 接著在你的照片 HTML 貼圖語法寫成下面這樣： <img src=" spacer.gif" style="background:url(你的照片路徑) white no-repeat center; width:***px" /> 收工 :) 在上述的語法裡， 我們把那張透明圖檔當作主要的顯示圖層， 把我們的照片，當作背景 這樣一來， 當讀者在你的照片上按下滑屬右鍵 或是直接拖曳時， 作用的對象，其實都是那張透明的 Spacer.gif 而不會動到我們的照片 除此之外， 我們一樣可以加上精緻的照片邊框， 或者是上一篇文章所提到的『下載中...』的小圖 整合起來的語法就是這樣： <div style="border:1px solid black; padding:10px 10px 20px 10px; background:url(loading.gif) white no-repeat center; width:照片寬度加上20px"><img src=" spacer.gif" style="background:url(你的照片路徑) white no-repeat center; width:***px" /> </div> ‹ CSS 語法下　各圖層概念示意 › PS： 所謂『防止』複製分享的照片，事實上僅僅只能防君子，所以只要增加一點麻煩就好(哪種方法都無法避免『螢幕拷貝』) 這個 CSS 的照片護貝法除了增加被複製的困難度以外， 還有一個用處， 就是我很討厭看到自己的頁面上出現那個缺圖的圖示 把照片轉為背景以後，就算 fotki.com(我買的電子相簿)掛掉， 頁面上也不會出現討厭的缺圖XX的圖示 ^0^ 這其實才是寫這篇的真正原因啦 :p