Problem

Chcę wyświetlić iframe na obrazie, ale nie mam pojęcia, jak to zrobić. Czy jest lepszy sposób niż czysto pozycjonowanie z CSS?

Mam stronę HTML, która wyświetla inne strony internetowe i chciałbym wyświetlić iframe na ekranie obrazu poniżej na tej stronie.

enter image description here

3
Dan Cundy 15 sierpień 2014, 01:04

3 odpowiedzi

Najlepsza odpowiedź

Zrobiłem ekran obraz tła, a następnie wykorzystałem absolutną pozycjonowaną nazwę IFrame. Dodałem iframe YouTube do ekranu w demo.

Próbny

.outer {
    background-image: url('http://i.stack.imgur.com/6hnLq.png');
    width:420px;
    height:365px;
}
.inner {
    position: relative;
    background-color:;
    left: 67px;
    top: 109px;
    width:277px;
    height:150px;
}

............

<div class="outer"><iframe class="inner"></iframe>

Możesz nawet użyć promienia granicznego 2 lub 3px, aby dopasować obraz.

5
Timothy 31 sierpień 2014, 01:08

Zasadniczo chcesz umieścić iframe w pojemniku, który jest absolutnie ustawiony. Następnie umieść go bezpośrednio nad obrazem. Oto przykład. Należy pamiętać, że łącze IFrame nie będzie działać wewnątrz skrzypce z powodu problemów JS tego samego pochodzenia.

http://jsfiddle.net/weyg1opk/

<div class="image_container">
<img src="http://i.stack.imgur.com/6hnLq.png" class="preview_image">
<div class="container">
    <iframe class="iframe_example" name="iframe_example">You do not have iframes enabled</iframe>   
</div>
.container {
    position: relative;  
    top: 110px;
    left: 68px
}
.image_container {
    width: 421px;
    height: 365px;
}
.preview_image{
    position: absolute;
}
.iframe_example {
    width: 270px;
    height: 155px;
    z-index: 1000;
}
1
tom.alexander 14 sierpień 2014, 21:19

Może potrafisz:

  • Przytnij obraz na kawałki i zastąp obraz ekranu IFrame bez obramowania i stałego rozmiaru

Lub

  • Użyj monitora jako tła i użyj div z bezwzględną pozycją, aby dokładnie dopasować rozmiar i pozycję ekranu.
-1
Yichaoz 14 sierpień 2014, 21:09