Question

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

点击this link可以看到我的意思，然后全屏打开小滑块中的一张图片。

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

{{1}}

Answer 1

关于这部分代码：

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

但是您无法将其设置为透明，您可以将其设置为白色。或者您可以添加特定图像。

修改

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

在SO上看到这篇文章：

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透明背景

2 个答案: