HTML-koden for en usynlig Bakgrunn på iframes

En iframe - eller inline rammer er et element i en side som viser en annen side. Rammen er en enkel måte å lage en liten, lett kontrollert element på en nettside, samtidig som innholdet i en annen fil. Iframes støttes i de fleste store nettleserne, inkludert Internet Explorer, Firefox, Safari og Chrome.

Iframe Transparency

En iframe er gjennomsiktig som standard - det har ikke en bakgrunn av sine egne, men i stedet bruker bakgrunnen for innholdskilden. Så lenge siden brukte som kilde ikke har en definert bakgrunnsfarge eller bilde, bør du bare se tekst og bilder over hoved sidens bakgrunnsbilde eller farge. Hvis du bruker en stil ark med forhåndsdefinerte bakgrunnsfarger på kilden til innholdet, bør du vurdere å fjerne det, så det kan være grunnen iframe ikke er gjennomsiktig.

Sette opp Frame

Iframe oppsettet er relativt enkel; trenger man bare å definere høyden og bredden av rammen, og kilden til innholdet. Du kan bruke en hvilken som helst fil på Web plass, inkludert HTML-filer, TXT-filer og PHP-filer. Mellom åpning og lukking koder bør du inkludere noen melding, som vil vises hvis en brukers nettleser ikke har iframe støtte. Din grunnleggende, transparent 300-pixel-torget iframe vil bli kodet thusly:

<Iframe src = "http://www.yourdomain.com/iframecontent.html&quot; width =" 300 "height =" 300 ">
<P> Dette iframe kan ikke vises riktig i nettleseren din. </ P>
</ Iframe>

sømløs integrerte rammer

Iframe har en grense automatisk, noe som fjerner enhver følelse av sømløshet at åpenhet gir. Dette kan fjernes enkelt nok ved hjelp av attributtet "frameborder" og sette den til null. For eksempel:

<Iframe src = "http://www.yourdomain.com/iframecontent.html&quot; width =" 300 "height =" 300 "frameborder =" 0 ">
<P> Dette iframe kan ikke vises riktig i nettleseren din. </ P>
</ Iframe>

Hvis du ønsker å bruke grensen igjen, kan du enten fjerne dette elementet eller endre null til ett. Du kan også endre og kontrollere grensen ved hjelp av CSS. Hvis du ønsket å legge et solid svart 3-pixel grensen, ville det se slik ut:

<Iframe src = "http://www.yourdomain.com/iframecontent.html&quot; width =" 300 "height =" 300 "style =" border: 3px solid # 000000; ">
<P> Dette iframe kan ikke vises riktig i nettleseren din. </ P>
</ Iframe>

Alternative Bakgrunns Ideas

Hvis du ønsker å matche din iframe og hovedsiden bakgrunn, vurdere å bruke samme farge på begge; ved hjelp av et bilde er risikabelt, så sjansene er at bildet ville bli forskjøvet mellom siden og iframe bakgrunnen. Du kan også bruke CSS til å lage en iframe gjennomsiktig, slik at selv med en annen bakgrunn inne i rammen kan du fortsatt legge til et element av blending. En iframe som er 25 prosent gjennomsiktig med en hvit bakgrunn og svart ramme ville se slik ut:

<Iframe src = "http://www.yourdomain.com/iframecontent.html&quot; width =" 300 "height =" 300 "style =" border: 3px solid # 000000; opacity: 0.75; filter: alpha (opacity = 75 ); ">
<P> Dette iframe kan ikke vises riktig i nettleseren din. </ P>
</ Iframe>

Den "filter" attributt er nødvendig for Internet Explorer, mens "opacity" fungerer for andre nettlesere.