投稿日:2017/04/06
要件
- 右クリック禁止
- ドラック&ドロップコピーガード
参考(参考にならない)
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;
}