图像 Fancybox 顶部的文本答案

【问题标题】：Text on top of image Fancybox图像 Fancybox 顶部的文本
【发布时间】：2019-03-01 09:45:06
【问题描述】：

我使用 Fancybox3 来显示一些图像，并且我想在图像顶部放置一个文本。这在我编辑 javascript 文件时有效：

测试

有了这个，我在实际图像上有了文字。但是当 Fancybox 放大和缩小图像时，这个文本很大。为什么会发生这种情况，有没有办法解决这个问题？

我想在图片上而不是在图片下方添加一个简单的图片下载文本。

【问题讨论】：

在我上面的帖子中，我发布了一个代码行。有些不对劲。这就是我的意思：<div class="fancybox-image-wrap"><span class="test">test</span></div> 而不仅仅是“测试”。

【解决方案1】：

您可以使用 .fancybox-is-scaling 类名在图像缩放时隐藏文本，类似于此演示 - https://codepen.io/fancyapps/pen/ePYNZo。

脚本使用 CSS transform: scale() 进行缩放以提高性能，但副作用是所有内容都随容器缩放。

【讨论】：

在哪里添加这个类？在前面提到的跨度中尝试过，但不起作用。放大和缩小时文本仍然很大。我在codepen的示例中也找不到这个类。我确实在我拥有的 css 文件中找到了它。
如果你不知道把 CSS 放在哪里，而且你不能在屏幕中间找到 CSS 类，那么，对不起，我放弃了。
我知道它在示例中的位置。但是示例 css 说 .fancybox-is-scaling .fancybox-image 而我在示例 html 或 Javascript 中都没有看到。我什至无法在源代码中找到它。有一个例子，我只是不知道它是如何工作的。抱歉，在编写此类代码方面，我没有你那么受过教育。
如果您创建了一个 codepen 演示，我将能够立即提供帮助 stackoverflow.com/help/mcve