html - 我的 Tumblr 网站在移动设备上的透明 PNG 后面显示白色，但在桌面设备上不显示，我该如何解决此问题？

Question

我是编码新手，只有 HTML 和 CSS 的基本知识。我目前正在尝试修改我的 Tumblr，以便使用自定义 HTML 和 CSS 显示我的作品，但我的手机无法正确显示 PNG 的透明度，但遇到了问题。我找了好久了，还没有看到这样的问题。

这是我的 Tumblr 链接:https://usercolby.com/

如果您在桌面上查看帖子，透明度效果很好。但如果您在手机上访问我的链接，带有透明胶片的帖子将具有白色背景。我不知道这是 PNG 问题还是某种带有白色背景的 div，仅在移动设备上可见。

See comparison here

这也是我用来消除桌面上的白色帖子背景的自定义 CSS:

.post-wrapper {
    **background: transparent;**
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
    position: relative;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #eee;
    border: transparent;
}

移动设备上的白色背景似乎来自除此之外的其他 div，我尝试找到图像周围的所有其他 div 并添加 background:transparent; 或 background :无；但似乎没有任何作用。

这是我在 stackoverflow 上发表的第一篇文章，所以我不知道我提供的信息是否足够，如果您需要其他信息，请告诉我。

非常感谢

Answer 1

你有:

@media screen and (max-device-width: 568px)
.photo figure img {
    /* background: #fff; */
    width: 100%;
}

对于窄于 568 像素的屏幕，它将背景颜色设置为白色。我在控制台中删除了它并修复了它。