背景移動８ 泡の３Ｄ移動 最終修正日 : 2015/07/03
■2015/07/03：記述が下側になるほど重なり方が上になるので、z-index指定を削除。
■2015/07/03：position:absolute;の初期値はtop:0; left:0;なので、初期値と同じ分は削除。
divで作成した領域で、速度の違う２種類の背景画像を移動させることで、少し立体的に見える３Ｄの泡を作成しました。
背景画像を敷き詰める時に使用する、横と縦のサイズが60pxの小さなドット柄の色違いを２種類使用しています。
１番下に青地に白丸のドット柄を使用。
そして同じ位置指定で、その上に白地に多色のドット柄を重ねて、その多色の方に透過指定を入れて、下地が透けて見えるようにしました。
背景透過の画像が見つからない時は、上に重なる領域の背景画像に透過指定を入れることで、奥行きのある背景が作成できます。
完全透過でない領域が重なっているせいで、全体の完成画像の色合いは基準の領域（id="aka1"）で使用した背景画像の色より薄くなります。
でも簡単な操作で、泡っぽい感じが出せます。
１番上の潜水少女の画像は、背景透過がされているので、そのまま左から右へ移動させています。
難しいのは領域の重ね方です。
領域の重ね方の方法の参考は
AllAboutから。
コツがわかれば何枚でも重ねられます。
移動領域の増やし方、減らし方は、
■背景移動２table背景移動・複数設定■の説明をご覧下さい。
全ソース：ソースの中をどこでも左クリックで『すべて選択』→右クリックで『コピー』を指定。ソースエリアの外をクリックすると『すべて選択』は消えます。