放大弹出透明png为灰色

Posted 2023-05-07

【中文标题】放大弹出透明png为灰色

【英文标题】：Magnific popup transparent png as grey

【发布时间】：2015-10-03 07:22:13

【问题描述】：

我遇到了弹出窗口的问题 - 当透明 PNG 打开时，透明部分是灰色的。我已经寻找解决方案但没有成功。将 img.mfp img 背景颜色更改为白色时，它会发生变化，但会显示白色，这对我不利。我需要像整个背景一样拥有它-不透明度为0.01的黑色（如果我没记错的话）...我没有更改与Magnific弹出窗口相关的CSS或JS中的任何相关代码。 任何人都可以帮忙吗？谢谢转发

【问题讨论】：

给我们看一些代码，到目前为止你尝试了什么？

我已将其上传至link 以供测试之用，我已经尝试了背景颜色和不透明度的技巧，但没有改变想要的结果。出于测试目的，它是“zahradna architektura”的第一张图片，现在图片只是 200 像素的透明正方形。感谢您的任何建议

这让我大吃一惊，不错！ :D

请不要在问题中编辑解决方案公告。接受（即单击旁边的“勾选”）现有答案之一，如果有的话。如果现有答案尚未涵盖您的解决方案，您还可以创建自己的答案，甚至接受它。

【参考方案1】：

要在弹出图像下添加白色背景，我使用此代码

.mfp-figure:after 
    content: '';
    position: absolute;
    left: 0;
    top: 40px;
    bottom: 40px;
    display: block;
    right: 0;
    width: auto;
    height: auto;
    z-index: -1;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
    background: rgba(255, 255, 255, 1); /* white background */