javascript - 如何在 iframe 中设置 google doc 的样式？

Question

我一直在摆弄这个想法:

http://jsfiddle.net/M68GL/9/

除了一件事，我完全按照我想要的方式拥有它。 iframe 正确继承了包含 iframe 的 div 的不透明度。但是，它不仅影响了 google doc 的背景，还影响了整个 google doc。我希望它只影响 google 文档的背景。

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

有办法吗？

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

<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 上的这种效果似乎不仅在网络中很常见，在现代操作系统中也很常见。

Answer 1

您正在将不透明度应用于“外部”div，因此它会将(文本、图像、谷歌文档)中包含的所有内容呈现为不透明度 = 0.5。

我相信您的意图是将“外部”div 的背景呈现为 0.5 的不透明度，而 iframe 本身的不透明度继续为 1.0。

这将需要一些分层魔法，因为 div 中的所有内容都采用其父级分配的不透明度，考虑到根据父级 div(“外部”)将 opacity = 1 视为 opacity = .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>

然后是CSS

 #test{
border: 0;
width: 800px;
height: 8000px;
position: relative;
left: 100px;
padding:20px;
}
 #outer{
position: absolute;
left: 100px;
padding: 20px;
background: #ffffff;
opacity: .5;
width: 800px;
height: 8000px;
 }
 #inner{
position: absolute;
width: 800px;
height: 40px;
background: #ffffff;
  }
body{
background: url('http://www.arcmarks.com/arcmarks/images/grid.jpg');
}

此外，如果您使用此方法，我会考虑将组件包含在它们自己的 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>