Fork
3
Fav
0
View
13987
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 0 lines
  • HTML 12 lines
  • CSS 15 lines
仕事で既存の画像の上に別の画像を載せたいという依頼を受けたので、
思いついた2案でサンプルを作成してみた。

1.CSS擬似要素のBeforeを使う場合
CSSの中に重ねる画像を定義するので、
クラス設定されたDIVタグを入れるだけで重ねることができる。
重ねる画像のパスもCSSの定義の中一箇所に入れるだけでいいので
共通の画像を重ねるのであればこっちが使い勝手がいい。
でもIE8以下は未対応なので、こちらはNG。

2.CSSのpositionを使う場合
こちらはIE6〜8でも対応しているので、今回はこっちを採用。
重ねる画像をposition:absoluteで位置調整する。
重ねる画像を個別に定義するので、別々の画像を重ねるような場合はこちらがいいかも。

動作確認済: IE6 IE8 Firefox Safari Chrome
  • 画像に別画像を重ねるサンプル
  • 画像に別画像を重ねるサンプル

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Forked

sort by