画像のダウンロード抑止を設定
透過画像を重ねて画像のダウンロード抑止
画像に重ねる透過画像(filter.png)を用意。
jQuery
$(function () {
// 画像読み込み
$('img').on('load', function(){
// フィルタ画像
var filter = $('<img>').attr('src', '/img/filter.png').css({
'width': $(this).width(),
'height': $(this).height()
}).addClass('filter');
// 透過画像を直前に差し込み
$(this).before(filter);
}).each(function() {
// IEキャッシュ対応
if (this.complete) {
$(this).load();
}
});
});
CSS
.thumb {
position: relative;
top: 0;
left: 0;
}
.filter {
position: absolute;
top: 0;
left: 0;
}
HTML
<div class="thumb"><img src="/img/thumb01.jpg"></div>
<div class="thumb"><img src="/img/thumb02.jpg"></div>
<div class="thumb"><img src="/img/thumb03.jpg"></div>
サンプル