背景作成16■ブロック並べの背景I枠線の窓     最終修正日 : 2016/04/07

動くJavaScript

●2016/04/07:即時関数で囲んで、グローバル変数を消しました。
JavaScript と CSS を利用して、背景を作成します。
今回は窓枠のみの背景です。窓の中の色の指定は「透明色」のみなので、body に指定した背景画像がそのまま見えます。
ソースの中の指定が違うだけで、■背景作成8ブロック並べの背景A格子 と同じ JavaScript です。

JavaScript のソースの中で、下記の指定(10pxの太さの立体窓枠と窓の内側に白いボカシの影)をします。
var bCSS="border:ridge 10px #860; box-shadow:inset 0 0 30px #fff;";
border の太さ指定の説明については、■背景作成15ブロック並べの背景H枠線のタイル をご覧下さい。
今回の縦線横線は2倍の「20px」指定にしています。

いままでと違って、bodyの背景画像指定には、固定位置指定( fixed )は入れません。
だからスクロールすると、窓からの風景が変わっていきます。
シームレス(継ぎ目の無い)の「星空」等の画像を指定しても面白いです。

さて、窓から右端の方に小さなサンタクロースの画像を入れています。
窓から見える風景に、body の背景画像以外の画像を入れる時は、必ず CSS で 「position:●●;」と「 z-index:-11;」のマイナス指定を入れて下さい。
窓には(このブロック並べの背景作成のJavaScriptは全部)、「z-index:-10;」のマイナス指定が入っていて、文章や画像の邪魔にならないようにしています。
しかし窓から見える画像は窓枠より下に表示されないとおかしいので、窓枠よりも更に下の、「 z-index:-11;」指定が必要なのです。

このJavaScriptは、■面白6マウスでブロック落とし を改造して作成しました。