jQueryで画像などの上に背景色をのせる Background color overlay

画像などの上に背景色を乗せるライブラリのご紹介です。

サンプル

ライブラリのダウンロードと設置

「ライブラリのダウンロード」をクリックしてダウンロードしてください。
ライブラリのダウンロード

ダウンロードしたjquery.overlay.jsを任意の場所へ置き読み込みます。
（jQueryの設置および読み込みは、完了もしくは同時作業を行っているものとします。）

<script type="text/javascript" src="jquery.overlay.js"></script>

設定したい要素などを指定し、実行します。

JavaScript

$(document).ready(function() { $('a.overlay').colorOverlay(); });

HTML

割り当てた要素はブロック要素と横幅が設定されている要素にしていなくてはなりません。
（例えば、a要素のに割り当てる場合はdisplayがblockまたはinline-block、widthが適切な値）

<div class="overlay"><img src="image.jpg" width="100" height="100" alt="" /></div>

オプション

以下のオプションが設定可能です。

オプション	初期値	説明
bgColor	#000	オーバーレイの色を指定します。
opacity	0.7	色の透明度を設定します。

$(document).ready(function() { $('.overlay').colorOverlay({ bgColor : '#ff3300', opacity : 0.5 }); });