用 CSS 替照片加護貝

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

有時候我們不太喜歡自己分享的照片
在未經知會的情形下，
三兩下的就被滑鼠右鍵複製
或者更直接的，把照片拖曳到讀者的桌面

雖然 google 一下，
就會找到很多很多的 Javascript 來防賭這樣的情形
但又覺得那些語法很困難，
一旦有了問題不知道怎麼調整
而且很可能還會有其他的副作用
實在有些傷腦經

在上一篇文章裡，
我們提到了用 CSS 背景圖層的概念，
替照片加上一些提醒圖樣
沿用相同邏輯，
我們也可以用 CSS 替你的照片加上一層保護
就像是替照片加上一層護貝那樣
也像是替你的 PDA 螢幕貼上一層透明保護膠膜
動手試試看吧 :)

1. 首先，
   我們製作一張完全透明的 gif 圖檔(圖檔大小 1px寬*1px高就行了)，
   命名為：spacer.gif
   
2. 接著在你的照片 HTML 貼圖語法寫成下面這樣：
   
   <img src="spacer.gif"
   style="background:url(你的照片路徑) white no-repeat center; width:***px" />
   
   
3. 收工 :)

在上述的語法裡，
我們把那張透明圖檔當作主要的顯示圖層，
把我們的照片，當作背景
這樣一來，
當讀者在你的照片上按下滑屬右鍵
或是直接拖曳時，
作用的對象，其實都是那張透明的 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：

1. 所謂『防止』複製分享的照片，事實上僅僅只能防君子，所以只要增加一點麻煩就好(哪種方法都無法避免『螢幕拷貝』)
   
2. 這個 CSS 的照片護貝法除了增加被複製的困難度以外，
   還有一個用處，
   就是我很討厭看到自己的頁面上出現那個缺圖的圖示
   把照片轉為背景以後，就算 fotki.com(我買的電子相簿)掛掉，
   頁面上也不會出現討厭的缺圖XX的圖示 ^0^
   這其實纔是寫這篇的真正原因啦 :p