Делить прозрачный фон при наличии в нем фрейма?

Question

У меня есть страница с iframe:

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

Обратите внимание, что источником iframe может быть другой домен, поэтому я не могу изменить 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>

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

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

Мне удалось получить изображение 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')");
}

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

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

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

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

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

Answer 1

Попробуйте:

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

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

---

Просто чтобы прояснить, вы не пытаетесь избавиться от цвета фона внутри самого iframe, а просто видите правильный нижний колонтитул и заголовок? В таком случае это должно работать с типом документа 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>

Answer 2

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

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

А вот test2.html:

this is a test file

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

Answer 3

CSS:

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

HTML:

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

Это поможет. Я попробовал это на IE6, и он работает там.

Answer 4

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