gpt4 book ai didi

html - 如何在基本 CSS 灯箱中的图像下方添加标题?

转载 作者:行者123 更新时间:2023-11-28 02:44:00 25 4
gpt4 key购买 nike

我使用以下代码来显示一个仅使用 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 在图像正下方添加标题。我设法让它显示,但它没有响应。我希望它随着图像大小的变化而移动。

如有任何帮助,我们将不胜感激。

最佳答案

对图像和标题使用position: absoluteposition: fixed 适合包装器。现在你已经将位置:固定到所有包装器和图像。

关于html - 如何在基本 CSS 灯箱中的图像下方添加标题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47010475/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com