はじめに

OSS の CSS Framework Bulma で画像を重ねて表示する方法についてまとめた。

TL;DR

  • 単純に重ねるだけなら is-overlay クラスを付与する
  • サイズも調整する場合は width, height を使う
  • 位置を調整する場合は top, lefttransform:translate を使う

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 完成イメージ
    2. ポイント
  5. まとめ
  6. 参考文献

環境・条件

詳細

画像はいらすとやから拝借。

完成イメージ

See the Pen [Bulma] 画像を重ねて表示 by 17num (@17num) on CodePen.

リンク: [Bulma] 画像を重ねて表示

ポイント

  • Helpers.is-overlay を利用
  • width, height でサイズを調整
  • top, left で四隅に寄せる
    • transform で位置の調整

top: 100%;, left: 100%; で右下に寄せることができるが、画像の開始位置(ペンギンの左上)が親要素の終了位置(背景画像の右下)になってしまう。

なので、transform:translate-100% ずつ(= 自分のサイズ分)位置をずらしてあげることで、親のちょうど右下に重なるように調整。

まとめ

  • 単純に重ねるだけなら is-overlay クラスを付与する
  • サイズも調整する場合は width, height を使う
  • 位置を調整する場合は top, lefttransform:translate を使う

参考文献

関連記事