Как создать документ google в iframe?

Question

Я возился с этой идеей здесь:

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

Я его, как именно я хочу за исключением одной вещи. Непрозрачность div, удерживающая iframe, правильно унаследована iframe. Однако, вместо того, чтобы использовать только документ google, он обрабатывает весь документ google. Я хочу, чтобы он отражался только на фоне документа google.

Таким образом, изображения, текст и т. Д. Все еще будут видны с непрозрачностью 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, что, следовательно, отображает все, что содержится внутри (текст, изображения, google doc), opacity = 0.5.

Я считаю, что ваше намерение состоит в том, чтобы сделать фон «внешнего» div равным 0,5, в то время как сам iframe продолжает иметь opacity = 1.0.

Это займет немного магии наслаивания, так как все внутри div принимает непрозрачность, назначаемую его родителем, учитывая, что opacity = 1 является непрозрачностью = .5 в соответствии с родительским div ('outer').

Есть разные способы сделать это, но в целом мой предложенный метод состоит в том, чтобы отделить 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>