要素に複数の背景画像を設定出来る「jQuery background

要素に複数の背景画像を設定出来る「jQuery background_layers」

jquery background_layersはCSS3の「multiple background images」つまり、ひとつの要素に対して複数の背景画像を設定することが出来る機能をクロスブラウザで利用する為のjQueryプラグインです。

使い方

まずはhead要素などでjQuery本体と、配布サイトよりダウンロードしてきたjquery.background_layers.jsを読み込みます。

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

jQuery background_layersの実行は次のように記述します。

$(function(){
	$('div').add_layer("#996600");
	$('div').add_layer("url('right_top.gif') no-repeat right top");
	$('div').add_layer("url('left_top.gif') no-repeat left top");
	$('div').add_layer("url('right_bottom.gif') no-repeat right bottom");
	$('div').add_layer("url('left_bottom.gif') no-repeat left bottom");
})

要素をセレクターで指定し(今回はdiv)、add_layer()内に追加したいbackgroundプロパティを記述していきます。add_layerを利用すると上に上に重ねて表示されます。ここは、メソッドチェーンで連続して指定することが出来ないので注意してください。

サンプルでは4隅に画像を設定し角丸を表現しています。

サンプル