Question

我在这里摆弄这个想法：

除了一件事，我完全按照我的要求去做。持有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的影响似乎不仅在网络中很常见，而且在现代操作系统中也是如此。

Answer 1

您正在将不透明度应用于“外部”div，因此将（text，images，google doc）中包含的所有内容渲染为opacity = 0.5。

我相信你的意图是将“外部”div的背景渲染为不透明度为0.5，而iframe本身仍然具有不透明度= 1.0。

这将需要一些分层魔术，因为div中的所有内容都采用由其父级指定的不透明度，将opacity = 1视为父级div（'outer'）的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>

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

1 个答案: