Fancybox v2 – 去除白色背景？答案

【问题标题】：Fancybox v2 – remove white background?Fancybox v2 – 去除白色背景？
【发布时间】：2016-10-01 16:36:11
【问题描述】：

我会尽力解释这一点 -->

我正在使用 Fancybox，一切正常。问题来了。

我想删除白色背景以及 iframe-pop 的阴影，而不是覆盖！我试着玩弄那些没有用的 css 文件......

如果您单击“#1”方块，您会明白我的意思：http://testingpage.de/ （我特意破坏了背景图是为了看白色的bg。）

感谢所有帮助和建议！

更新：

由于有用的提示，我可以摆脱图像的白色背景。它仍然不适用于 iframe...

【问题讨论】：

从fancybox css的第41行删除这两条规则：-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);，盒子阴影应该被删除
问题 1/2 已解决，谢谢！现在我只需要摆脱白色背景...
当您在fancybox中触发不是iframe的东西时会发生什么？
如果我触发常规图像，透明度会起作用。问题似乎是 iframe...
你试过在fancybox选项中去掉背景色吗？尝试这样的事情：stackoverflow.com/questions/16482779/…

【解决方案1】：

无需编辑原始 css 文件...只需将其添加到您的自定义 css 文件中并在加载 fancybox css 文件后

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 0 0;
       -moz-box-shadow: 0 0 0;
            box-shadow: 0 0 0;
}

然后是你的脚本

$(".fancybox").fancybox({
    padding: 0 // remove white border
});

编辑：

对于全透明背景，还要添加

.fancybox-skin {background: transparent}

在您的自定义 css 文件中

查看更新JSFIDDLE

注意：这会使fancybox 透明，但iframe 内容的背景（body，html）也应该是透明的

【讨论】：

谢谢，但我不只是想删除边框。我想删除图像后面的白色背景。我附上了一个屏幕截图以进行澄清。白色区域应该是透明的而不是白色：i.imgur.com/gPu9daM.png
谢谢！它对图像是透明的，iframe bg 仍然是白色的。
@Costa 您需要（单独）编辑在 iframe 中打开的页面的 css，因为到目前为止它们具有 css 背景 #fff 属性