Fotorama透明背景

Question

我正在使用 Fotorama 滑块插件，您可以在其中全屏打开图像。我需要背景是透明的，但是我好像改不了。

您可以通过单击 this link 并在全屏小滑块中打开其中一张图片来明白我的意思。

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

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

Answer 1

关于这部分代码：

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

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

编辑

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

在 SO 上看到这个 post：

Background/element goes black when entering Fullscreen with HTML5

Answer 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;
}

Fotorama透明背景

Fotorama transparent background

css

jquery

fotorama