画像の操作：
背景画像のファイルパスを取得
指定したNodeの背景に設定されている画像のファイルパスを文字列で返す。
Node
Nodeを渡す id値を文字列で指定してもよい
Number
複数の背景画像が設定されている場合の配列番号 0 = 1枚目 ・ 1 = 2枚目 … ／ 省略した場合は 0 となる
●必須引数 ●オプション引数(省略可能)
記述例
$imgGetBgFilePath($id('block1'))
$imgGetBgFilePath('block1', 1)
戻り値
画像ファイルへのパスを文字列で返す。
・画像が設定されていない場合には none を返す。
動作サンプル
<div>
背景画像を
設定済み
背景画像を
設定済み
<div>
背景画像を
2枚設定済み
背景画像を
2枚設定済み
<div>
背景画像は
未設定
背景画像は
未設定
Sass :
#sample1 {
& > div:nth-child(1) {
background: url(../images/cmn_bg_1.png);
background-size: 64px auto;
}
& > div:nth-child(2) {
background:
url(../images/cmn_bg_2a.png),
url(../images/cmn_bg_2b.png);
background-size:
64px auto,
64px auto;
}
& > div:nth-child(3) {
background: rgba(#c6dbde,0.3);
}
}
Javascript :
var bgPath1=$imgGetBgFilePath($tag('div','sample1',0));
var bgPath2=$imgGetBgFilePath($tag('div','sample1',1),1); //2枚目の背景画像を指定
var bgPath3=$imgGetBgFilePath($tag('div','sample1',2));
※上記のサンプルコードは主にPC表示用を想定している。スマホ用のコーディングでは別途調整が必要となる可能性がある。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。
※この関数の動作サンプルとして必須ではない装飾的なCSSコードなどは省略して提示している。