Il codice HTML per uno sfondo invisibile su iFrames

March 4

Un iframe - o inline quadro è un elemento all'interno di una pagina che visualizza un'altra pagina. Il telaio è un modo semplice per creare un piccolo, elemento facilmente controllabile su una pagina web, mantenendo il contenuto in un altro file. Iframe sono supportati nella maggior parte dei browser principali, tra cui Internet Explorer, Firefox, Safari e Chrome.

Iframe Trasparenza

Un iframe è trasparente per difetto - non ha uno sfondo di essa la propria, ma utilizza invece lo sfondo del origine di contenuto. Fino a quando la pagina utilizzata come fonte non ha un colore di sfondo o l'immagine definita, si dovrebbe vedere solo il testo e le immagini immagine di sfondo della pagina principale o il colore sopra. Se si utilizza un foglio di stile con sfondo predefinite colori sulla vostra fonte di contenuto, provare a rimuovere, come questo può essere il motivo per cui il vostro iframe non è trasparente.

Configurazione Telaio

configurazione Iframe è relativamente semplice; è sufficiente per definire l'altezza e la larghezza del telaio, e la fonte del contenuto. È possibile utilizzare qualsiasi file sul vostro spazio web, inclusi i file HTML, file TXT e file PHP. Tra i tag di apertura e di chiusura si dovrebbe includere qualche messaggio, che verrà visualizzato se il browser di un utente non dispone di supporto iframe. La vostra base, trasparente iframe 300 pixel quadrati sarebbe stata codificata nel seguente modo:

<Iframe src = "http://www.yourdomain.com/iframecontent.html&quot; width =" 300 "height =" 300 ">
<P> Questa iframe non può visualizzare correttamente nel browser. </ P>
</ Iframe>

senza soluzione di continuità iframe

L'IFRAME ha un bordo automaticamente, che rimuove ogni senso di senza soluzione di continuità che la trasparenza offre. Questo può essere rimossa abbastanza facilmente utilizzando l'attributo "frameborder" e impostandolo a zero. Per esempio:

<Iframe src = "http://www.yourdomain.com/iframecontent.html&quot; width =" 300 "height =" 300 "frameborder =" 0 ">
<P> Questa iframe non può visualizzare correttamente nel browser. </ P>
</ Iframe>

Se si desidera utilizzare di nuovo il confine, è possibile rimuovere questo elemento o cambiare lo zero a uno. È inoltre possibile modificare e controllare il confine con CSS. Se si vuole aggiungere un solido nero confine 3 pixel, sarebbe simile a questa:

<Iframe src = "http://www.yourdomain.com/iframecontent.html&quot; width =" 300 "height =" 300 "style =" border: 3px solid # 000000; ">
<P> Questa iframe non può visualizzare correttamente nel browser. </ P>
</ Iframe>

Sfondo, Idea Alternative

Se si vuole abbinare il vostro iframe e sfondo della pagina principale, è possibile utilizzare lo stesso colore su entrambi; utilizzando un'immagine è rischioso, in quanto è probabile che l'immagine sarebbe allineate tra la pagina e lo sfondo iframe. È inoltre possibile utilizzare i CSS per fare un iframe trasparente, in modo che anche con uno sfondo diverso all'interno della cornice è possibile aggiungere ancora un elemento di miscelazione. Un iframe che è il 25 per cento trasparente con uno sfondo bianco e bordo nero sarebbe simile a questa:

<Iframe src = "http://www.yourdomain.com/iframecontent.html&quot; width =" 300 "height =" 300 "style =" border: 3px solid # 000000; opacità: 0,75; filtro: alpha (opacità = 75 ); ">
<P> Questa iframe non può visualizzare correttamente nel browser. </ P>
</ Iframe>

L'attributo "filtro" è necessario per Internet Explorer, mentre "l'opacità" lavora per altri browser.


Articoli Correlati