解决Iframe无论怎么设置都无法透明的问题

前言

事出反常必有妖,但这次着实我是没想到这么离谱…
我怎么也没想到Iframe不透明居然是因为深色模式导致的…
我也是看到这篇文章才恍然大悟的:iframe在dark模式下无法透明

解决

当你像往常一样设置了iframe与其内部的body背景为transparent后依旧无法透明的话,
可以尝试设置其style=“color-scheme:‘light’” 或 css文件中加入:

iframe{
	color-scheme:light;
}
1
2
3

分析

一个 iframe 的背景不透明可能有以下几个原因：

• 深色模式:如果你的系统环境或者CSS设置让iframe处于深色模式下,则会出现无法透明的问题,你需要指定iframe样式color-scheme=“light”;
• CSS 属性设置：如果你没有将 iframe 的 background 或 background-color 属性设置为 transparent，那么 iframe 的背景将不会是透明的。
• HTML 文档的背景：即使你将 iframe 的 background-color 属性设置为 transparent，如果 iframe 中的 HTML 文档的背景不是透明的，那么你仍然会看到一个不透明的背景。你需要确保 iframe 中的 HTML 文档的 body 或 html 元素的 background-color 属性也被设置为 transparent。
• 浏览器兼容性问题：一些旧的或非主流的浏览器可能不支持 iframe 的透明背景。在这种情况下，你可能需要寻找一些替代方案，或者接受在这些浏览器上 iframe 的背景不会是透明的。
• 安全或隐私设置：一些浏览器的安全或隐私设置可能会阻止 iframe 的背景变为透明。例如，一些浏览器可能会阻止跨域的 iframe 的背景变为透明。