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.
4
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.
.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
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.
<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
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
14 sierpień 2014, 21:09