Javascript 如何在iframe中设置google文档的样式？

我一直在这里摆弄这个想法：

除了一件事，我完全有我想要的。保存iframe的div的不透明度由iframe正确继承。然而，它不是只影响谷歌文档的背景，而是影响整个谷歌文档。我希望它只影响谷歌文档的背景

这样，图像、文本等仍将以100%不透明度显示

有办法做到这一点吗

奇怪的是，无缝属性似乎对行为没有影响

<div id = "outer">   <div id = "inner"></div>   <iframe scrolling="no" id="test" src="https://docs.google.com/document/d/1IodTYp_yaxBlgEUv_TqKK-1oTgjbmh0VTg4jjX3LjKE/pub"
></iframe> </div>

---

文本在不透明div上的这种效果似乎不仅在web中很常见，而且在现代操作系统中也很常见。

您将不透明度应用于外部div，因此它将渲染文本、图像、google文档中包含的所有内容，使其不透明度=0.5

我相信您的意图是渲染外部div的背景，使其不透明度为0.5，而iframe本身的不透明度仍然为1.0

这将需要一点分层魔法，因为div中的所有内容都采用其父级指定的不透明度，根据父div“outer”，考虑不透明度=1为不透明度=0.5

有不同的方法，但总的来说，我建议的方法是分离iframe和希望使用的不透明背景，然后在不透明背景上分层iframe。我已经修改了你附加的链接，在某种程度上实现了这一点

 <div id = "outer">
 <div id = "inner"></div></div>
    <iframe scrolling="no" id="test" src="https://docs.google.com/document/d/1IodTYp_yaxBlgEUv_TqKK-1oTgjbmh0VTg4jjX3LjKE/pub" >                                               
</iframe>

此外，如果使用此方法，我会考虑将自己的组件包含在DIV中，以便更容易地进行样式和操作，如

<div id="iframeWithOpaqueBackground">
 <div id = "outer">
  <div id = "inner"></div></div>
     <iframe scrolling="no" id="test"  src="https://docs.google.com/document/d/1IodTYp_yaxBlgEUv_TqKK-1oTgjbmh0VTg4jjX3LjKE/pub" >    
  </iframe>
</div>

---

我知道它是有效的，但是你是如何摆脱iframe的白色背景的，我认为它默认有一个？为什么它会继续在标题中显示出来？我在这里做了更多的修改-我相信iframe的背景，特别是google文档是透明的，我在那里没有做任何特别的事情。。。。在第一把小提琴中，我记得divs outer和inner被设置为ffffff。至于标题问题，你是否希望社区像最初的小提琴一样隐形？

<div id="iframeWithOpaqueBackground">
 <div id = "outer">
  <div id = "inner"></div></div>
     <iframe scrolling="no" id="test"  src="https://docs.google.com/document/d/1IodTYp_yaxBlgEUv_TqKK-1oTgjbmh0VTg4jjX3LjKE/pub" >    
  </iframe>
</div>