我的 Tumblr 网站在移动设备而非桌面设备上的透明 PNG 后面显示为白色，我该如何解决这个问题？

Question

我是编码新手，只有 HTML 和 CSS 的基础知识。我目前正在尝试修改我制作的 Tumblr，以使用自定义 HTML 和 CSS 显示我的作品，但我遇到了一个问题，我的 phone 无法正确显示我的 PNG 透明胶片。我已经找了一段时间了，还没有看到这样的问题。

这是我的 Tumblr link：https://usercolby.com/

如果您在桌面上查看 posts，透明胶片效果很好。但是，如果您在 phone 上访问我的 link，带有透明胶片的 post 具有白色背景。我不知道这是 PNG 问题还是某种 div 只有在移动设备上可见的白色背景。

See comparison here

这也是自定义的 CSS 我曾经用来去除桌面上的白色 post 背景：

.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: none; 但似乎没有任何效果。

这是我在 Whosebug 上的第一个 post，所以我不知道我提供的信息是否足够，如果您需要任何其他信息，请告诉我。

非常感谢

Answer 1

你有：

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

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

Answer 2

在post回答这个问题后大约 10 分钟解决了这个问题 -_-

我在检查 post

时随机发现了另一个元素

.photo .high-res img {
    width: 100%;
}

改为

.photo .high-res img {
    background: none;
    width: 100%;
}

这怎么行？

非常感谢回答的人

我的 Tumblr 网站在移动设备而非桌面设备上的透明 PNG 后面显示为白色，我该如何解决这个问题？

My Tumblr site displays white behind transparent PNG's on mobile but not desktop, how can I fix this?

html

css

tumblr