Fotorama 透明背景答案

【问题标题】：Fotorama transparent backgroundFotorama 透明背景
【发布时间】：2016-04-07 19:36:08
【问题描述】：

我正在使用 Fotorama 滑块插件，您可以在其中全屏打开图像。我需要背景是透明的，但我似乎无法更改它。

您可以通过单击this link 并全屏打开小滑块中的一张图像来了解我的意思。

我已尝试将滑块中的所有背景更改为以下内容：

background: rgba{0,0,0,0);

【问题讨论】：

对我来说，将其设置为 .fotorama--fullscreen，我看到你的 CSS 中的 cmets 已经有了它，它可以工作（只是页面在图像周围的空间中几乎没有任何东西，所以它偶尔只显示白色或搜索框)

标签： jquery css fotorama

【解决方案1】：

关于这部分代码：

.fotorama--fullscreen .fotorama__nav, .fotorama--fullscreen .fotorama__stage {
    background: #000;
}

但是不能设置为透明，可以设置为白色。或者，您可以添加特定图像。

编辑

您无法将其设置为透明，因为您进入的是全屏模式，并且默认情况下背景设置为黑色。您可以通过您想要的每种颜色更改此颜色，但您永远不会看到您网站的内容。

在 SO 上看到这篇文章：

Background/element goes black when entering Fullscreen with HTML5

【讨论】：

我已经添加了.fotorama--fullscreen .fotorama__nav, .fotorama--fullscreen .fotorama__stage { background: url(http://www.clauson-kaas.com/cgi-files/transparent.png) !important; }，但没有任何区别
对，我的答案不清楚，但我解释得更好一些。实际上，使用此插件，您可以进入全屏模式。查看我的更新答案
检查 fotorama 选项以更改此行为：fotorama.io/customize/options
您的回答无效。我想到了。我已经做出了新的回答。
是的，我已经检查了您在代码中所做的更改。我自己用萤火虫试过，但没有用。当您可以使用真实代码而不是检查器时，也许调试起来会更容易。

【解决方案2】：

有可能 - 我自己用以下代码想通了：

.fullscreen .fotorama--fullscreen {
    background: transparent !important;
}

.fullscreen .fotorama__wrap {
    background: rgba(0,0,0,0.7) !important;
}

.fullscreen .fotorama__img {
    top: 0px !important;
    width: 50% !important;
    height: auto !important;
    margin: auto !important;
    left: 0px !important;
}

【讨论】：