画像の操作：
背景画像の重ね順を指定
CSSで設定した背景画像の重ね順を基準として、任意の順番で重ね順を変更する。
Node
Nodeを渡す id値を文字列で指定してもよい
String
変更後の順番を半角スペース区切りの配列番号で指定
(例) 3枚目→1枚目→2枚目とする場合は「2 0 1」とする ／ 省略した場合は初期化される
(例) 3枚目→1枚目→2枚目とする場合は「2 0 1」とする ／ 省略した場合は初期化される
●必須引数 ●オプション引数(省略可能)
記述例
$imgBgOrder($id('block1'), '2 0 1')
$imgBgOrder('block1')
注意点
CSSで設定されている全ての背景画像を指定する必要はない。例えば、3枚設定されているうち、2枚目・3枚目だけを指定することも可能。
順番の変更には、background-image、background-repeat、background-position、background-sizeが連動する。
動作サンプル
CSSで設定したbackground-imageは3枚で、前面から『テキスト(SVG)』『水玉(透過)』『格子模様(不透明)』の順番で設定している。
Sass :
#sample1 {
background:
url(../images/cmn_bg_text.svg) no-repeat center center, //テキスト
url(../images/cmn_bg_3.png) left top, //水玉
url(../images/cmn_bg_1.png) left top; //格子模様
background-size:
auto 40px,
64px 32px,
64px 32px;
}
}
Javascript :
$imgBgOrder('sample1','0 2 1'); //テキスト→格子模様→水玉
$imgBgOrder('sample1','1 0 2'); //水玉→テキスト→格子模様
$imgBgOrder('sample1','0 1'); //テキスト→水玉
$imgBgOrder('sample1'); //初期化
CSSで設定したbackground-imageは3枚で、前面から『テキスト(SVG)』『サークル(透過)』『ストライプ(透過)』の順番で設定している。
Sass :
#sample2 {
background:
url(../images/cmn_bg_text.svg) no-repeat left 25px bottom 50px, //テキスト
url(../images/cmn_bg_circle.svg) no-repeat center center, //サークル
url(../images/cmn_bg_4.svg) no-repeat right top; //ストライプ
background-size:
auto 40px,
174px auto,
160px 125px;
}
}
Javascript :
$imgBgOrder('sample2','2 1 0'); //ストライプ→サークル→テキスト
$imgBgOrder('sample2','0 2'); //テキスト→ストライプ
$imgBgOrder('sample2','1'); //サークルのみ
$imgBgOrder('sample2'); //初期化
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。