Categories:文章類別

[懶人拍照] 用 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 的照片護貝法除了增加被複製的困難度以外,
    還有一個用處,
    就是我很討厭看到自己的頁面上出現那個缺圖的圖示
    把照片轉為背景以後,就算 flickr.com(我買的電子相簿)掛掉,
    頁面上也不會出現討厭的缺圖XX的圖示 ^0^
    這其實才是寫這篇的真正原因啦 :p


 
延伸閱讀:
用 CSS 結合 PNG 替照片加上浮水印
事後白平衡
利用 Alpha Channel 製作黑白照片
用 CSS 替照片加護貝
照片下載的過程中 CSS 一下