従来のWebアプリにのみ適用されます

Light Box Imageのリファレンス

Last updated
Save as PDF

レイアウトおよびクラス

高度なユースケース

Light Box Imageオーバーレイを変更する

カスタムCSSを追加して、Light Box Imageオーバーレイを開いたときの不透明度を変更することができます。これをアプリケーションに実装するには、以下のCSSコードをコピーしてテーマに追加します。

.pswp__bg {
    background-color: rgba(0, 0, 0, 0.8);
}

.pswp__ui--fit .pswp__top-bar, .pswp__ui--fit .pswp__caption {
    background-color: rgba(0, 0, 0, 0);
}

Light Box Imageパターン内の画像に丸い角を追加する

Light Box Image内の画像に丸い角を追加するには、以下のカスタムCSSをテーマに追加します。

.lightbox-content-thumbnail img,
.pswp__item img {
    border-radius: var(--border-radius-soft);
}