ホームページ上から画像を保存できないようにしたい

要件

• 右クリック禁止
• ドラック＆ドロップコピーガード

参考（参考にならない）

http://www.stylish-style.com/csstec/basic/g-photo-guard.html
画像を上に置くとか、めんどくさすぎてやってられない。

参考とは別のやり方

以下のように、figureに対してマスクをかけて対応する。
figcaptionまでマスク下に置かれてしまうので、
そこはz-indexでうまく調整しよう。
z-indexを調整させるためにposition: relativeを指定

.sp-image-container,  
h1.title,  
figure {  
  position: relative;  
  overflow: hidden;  
  z-index: 0;  
}  
  
.sp-image-container:before,  
h1.title:before,  
figure:before {  
  content: '';  
  display: block;  
  position: absolute;  
  top: 0;  
  left: 0;  
  right: 0;  
  bottom: 0;  
  margin: auto;  
  z-index: 1;  
  
}  
figure figcaption {  
  position: relative;  
  z-index: 2;  
}