2009-10-28 9 views
1

У меня есть страница, которая содержит в IFRAME:Div прозрачный фон при наличии iframe в нем?

<div style="position:absolute; width:80%; top:100px; left:10%; z-index:5;"> 
    <iframe src="www.google.com" /> 
</div> 

Обратите внимание, что источник фрейма может быть из другого домена, поэтому я не могу изменить HTML в нем.

В дополнение к этому ifame У меня есть меню и некоторые украшения изображение на дне:

<div id="menu" style="position:absolute; width:100%; top:0px; left:0px; z-index:100;"> 
    ... 
</div> 

<div id="footer" style="position:absolute; width:100%; bottom:0px; left:0px; z-index:0;"> 
    ... 
</div> 

Как вы можете видеть, я дал г-индекс для каждого DIV, поэтому он должен отображаться в том порядке, : меню сверху, затем div с iframe, а в конце - нижнее изображение.

Что я хочу, так это то, что iframe (и div держит его) не имеет фона (прозрачный цвет bg, если хотите), так что фон и изображение нижнего колонтитула позади него будут видны. Обратите внимание, что я хочу изменить только цвет фона; текст не должен меняться или получить непрозрачность.

мне удалось добраться до Б.Г. изображений и изменить его (с JQuery):

if ($.browser.msie == false) { 
    $(document.getElementById("content").contentDocument.body). 
         css('background', "url('transparent.png')"); 
} 
else { 
    $(document.getElementById("content").Document.body). 
         css('background', "url('transparent.png')"); 
} 

Он работает Greate на IFRAME, но DIV, который держит его каким-то образом получает белый фон.

Это не изменится, если я установил фон div на это изображение «transparent.png»; div все равно сохранит свой белый фон!

Если я заменил div на таблицу, iframe позади изображения нижнего колонтитула (хотя он имеет индекс z больше).

Все, что я хочу просто, чтобы увидеть колонтитул изображения позади этого фрейма ...

Пожалуйста, помогите, я совершенно безнадежен ...: (

ответ

3

Try:

background: transparent url('transparent.png'); 

Одна вещь, чтобы отметить, IE6 не поддерживает альфа-прозрачные пленки для PNG файлов. Вы хотите иметь специальную таблицу стилей IE и использовать только IE для этого.


Просто clearify, вы arn't пытается избавиться от цвета фона внутри самого фрейма, но просто быть в состоянии увидеть колонтитул и заголовок правильно? Если это так, это должно работать с документом HTML4.01.

<div style="position:absolute; width:80%; top:100px; left:10%; z-index:5;"> 
    <iframe style="background-color: transparent;" src="testframe.html" allowtransparency="true"></iframe> 
</div> 
+0

Большое спасибо, он работает finnaly! О вашем вопросе, я хочу избавиться от цвета фона в iframe; Я уже попробовал поставить permansparency = "true" на iframe; как-то он не работает в IE8. Я не получил то, что вы написали о IE6; Будет ли «transparent.png» работать над этим? Еще раз спасибо! –

+0

Основной смысл этого заключается в том, что альфа-прозрачность в png (как прозрачный фон) не отображается в IE6, для этого есть взломать, и обычно рекомендуется применять его в IE только условной таблице стилей. Некоторая информация об этом здесь: http://stackoverflow.com/questions/130161/ie6-issues-with-transparent-pngs Кроме того, если png - это просто прозрачное изображение 1x1, я бы использовал gif вместо него У меня такие же ограничения. Обычно, когда альфа-прозрачность используется в pngs, для более продвинутой прозрачности, например, угасающего градиента. – thismat

1

Я испытал это и не был в состоянии дублировать . проблема Вот мой основной HTML:

<div style="background:red;"> 
<div> 
    <iframe src="test2.html" /> 
</div> 
</div> 

И вот test2.html:

this is a test file 

Это дис играет «это тестовый файл» в iframe с красным фоном позади iframe. Можете ли вы опубликовать код, чтобы прояснить вашу проблему?

+0

Это не работает для меня. Я пробовал ваше решение более одного раза, как в IE, так и в Firefox; он просто положил белый backgroung в iframe. –

+0

А, я вижу. Это работает в FF3.5, но не в IE8. Я напишу что-то новое, если смогу это понять. – Travis

0

Вы пробовали прозрачный фон для div и этого полупрозрачного фонового изображения на iframe?

+0

Это правда, что теперь отображается bg «base» div, но весь текст, который у меня есть в iframe, также получает фильтр непрозрачности, что говорит о том, что он не отображается. Я хочу изменить только фон, чтобы быть прозрачным. –

0

CSS:

<style> 
    .hid 
    { 
     filter: alpha(opacity=70); 
     opacity: 0.7; 
     -moz-opacity: 0.7; 
    } 
</style> 

HTML:

<iframe class="hid"></iframe> 

Это будет делать трюк. Я пробовал его на IE6, и там он работает.

Смежные вопросы