Tumblr站点移动端透明PNG出现白色背景桌面端正常如何修复

解决方案 #

1. 优先提升样式优先级覆盖移动端默认规则
   Tumblr主题通常会在@media媒体查询块中单独编写移动端适配样式，你之前添加的透明背景规则可能未覆盖移动端场景，或优先级低于主题默认规则。将以下代码添加到你自定义CSS的最底部：

/* 全局覆盖所有帖子容器、媒体容器、图片元素的背景 */
.post-wrapper,
.post_media,
.tmblr-post-content,
article.post,
[class*="post-container"],
.post-wrapper img {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 专门适配移动端场景，覆盖主题内置的移动端样式 */
@media only screen and (max-width: 768px) {
    .post-wrapper,
    .post-wrapper [class*="media"],
    .post-wrapper img,
    .post-content,
    .mobile-post-container {
        background: transparent !important;
        background-color: transparent !important;
    }
}

2. 排查样式来源验证修复效果
   如果上述代码未生效，可以使用桌面端浏览器的移动端调试功能定位问题：打开Chrome/Edge开发者工具，切换到移动端设备模拟模式，选中白色背景的区域，查看「计算样式」面板中的background-color属性对应的来源选择器，将该选择器添加到上述代码的规则列表中即可。

内容的提问来源于stack exchange，提问作者ColbCaBolb