如何在基本CSS燈箱的圖片下方添加標題？

Question

我使用以下代碼僅使用CSS來顯示一個簡單的燈箱。 （我不想使用Javascript）。

 .lightbox { display: none; position: fixed; z-index: 999; width: 100%; height: 100%; text-align: center; top: 0; left: 0; background: rgba(0, 0, 0, 0.8); } .lightbox img { position: fixed !important; top: 50% !important; transform: translateY(-50%) translateX(-50%); width: 70%; } .lightbox figcaption { display: inline; position: fixed!important; top: 70% !important; right: 5%; transform: translateX(0%); color: white; } @media (max-width: 500px) { .lightbox img { width: 90%; } } @media (min-width: 800px) { .lightbox img { width: 50%; } } 

 <a href="#img1"><img class="img-thumbnail" src="img/sensei/kieflesson.jpg"></a> <a href="#_" class="lightbox" id="img1"> <figure><img src="img/sensei/kieflesson.jpg"> <figcaption>Test22</figcaption> </figure> </a> 

如您所見，我一直在嘗試使用figcaption在圖像下方放置一個標題。 我設法使其顯示，但它沒有響應。 我希望它隨着圖像大小的變化而移動。

任何幫助將非常感激。

Answer 1

使用position: absolute圖像和標題的position: absolute 。 position: fixed用包裝紙position: fixed就可以了。 現在，您已放置位置：還固定在所有包裝紙和圖像上。

Answer 2

謝謝你的幫助。 看來我的代碼有些復雜。 我使用以下方法達到了預期的效果：

.lightbox {
  display: none;
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);}

.lightbox figure {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width:90%;
    max-width: 500px;}

.lightbox img {
    width:100%;}

.lightbox figcaption {
    bottom:0;
    position:absolute;
    color:white;
    width: 100%;
    max-width: 500px;
    text-align: right;
    padding-right: 10px;
    background: rgba(0, 0, 0, 0.5);}