0

David Walsh の dwImageProtector Plugin ( http://davidwalsh.name/image-protector-plugin-for-jquery )に似た空白の画像を動的にオーバーレイする JavaScript ソリューションを見つけようとしています。そのプラグインに関する私の問題は、最初に、実際にはターゲットの画像に整列しない「ボディ」にオーバーレイを追加することです.2番目に、そのプラグインはレスポンシブ用に構築されていません。つまり、ブラウザの幅を調整するとオーバーレイimage は元の解析済み画像サイズと同じままです。

私のコードは次のようになります。

//css
.column { position: relative }
.column img { width: 100%; }


// html
<div class='column'>
    <img class='protect' src='img/source.jpg' />
    <span>copyright 2013</span>
</div>
4

1 に答える 1

2

注:オーバーレイ トリックは、あなたの画像を盗もうとする初心者の訪問者をせいぜい抑止するだけです。次の理由により、盗難を抑止する実行可能な方法はありません。

  1. 訪問者は Inspector から画像ソースを確認し、直接ダウンロードできます (ただし、ファイルへの直接アクセスを防ぐ .htaccess ルールを使用して回避できます)。
  2. 訪問者は画像オーバーレイを非表示にできます
  3. 訪問者はページのスクリーンショットを撮ることができます
  4. 訪問者は、サーバーからブラウザに提供されるファイルを盗聴できます

私の解決策に戻ると、実際にはこの目的で JavaScript (または jQuery) を使用する必要はありません。疑似要素を使用した単純な CSS トリックが機能します。次のマークアップがあるとします。

<div class='column'>
    <div class='protect'>
        <img src='img/source.jpg' />
    </div>
    <span>copyright 2013</span>
</div>

あなたのCSS:

.protect {
    position: relative;
}
.protect:after {
    background-image: url(/path/to/overlay);
    background-size: cover;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
}

ただし、マークアップを変更できない場合は、jQuery を使用してイメージ要素を要素でラップし、<div class="protect">上記と同じスタイルを適用する必要があります。

$("img").each(function() {
    $(this).wrap('<div class="protect" />');
});
于 2013-10-16T20:29:17.943 に答える