Sto cercando un modo alternativo di fare:Non v'è alcun attributo "allowTransparency"
<iframe transparency=true ...
Quando faccio la validazione W3C, sto ottenendo l'errore:
Column 31: there is no attribute "allowtransparency"
Se uso questo CSS,
.iframe-trans-fix{
opacity: 0;
filter:alpha(opacity=0);
}
per il frammento di cui sopra sto ottenendo un iframe vuoto.
Mentre è vero che le specifiche HTML del W3C non lo definiscono, esiste un attributo allowTransparency ed è supportato da tutti i browser moderni (e Internet Explorer). Come ci ha insegnato il HTML5, il carrello dovrebbe essere davanti al cavallo.
Supponiamo di avere questo HTML nella pagina principale, index.html:
<html>
<body>
<iframe src="source.html"
allowTransparency="true"
style="background-color:lightgreen;"
width="400" height="200">
</iframe>
</body>
</html>
E la tua source.html assomiglia a questo:
<html>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin gravida, magna
id bibendum sollicitudin, tellus tortor consequat enim, et mollis mauris
augue et dui. </p>
</body>
</html>
Quando si apre la pagina principale (indice. html) nel tuo browser, vedrai il testo da source.html in un iframe, ma avrà uno sfondo verde chiaro.
(Testato con Safari, Firefox e Chrome su Mac OS X e Internet Explorer 8 e Chrome su Windows XP)
Edit: La chiave è questo: La pagina di origine non può impostare il proprio sfondo. Se lo fa, ignora lo sfondo trasparente.
io non sono sicuro di quello che stai cercando di fare qui, ma questo dovrebbe essere quello che stai cercando:
iframe {
background-color: transparent;
}
Questo è, ovviamente, partendo dal presupposto che si desidera da sfondo al iframe essere trasparente
Non v'è alcun attributo HTML di nome transparency, quindi sarà sempre ottenere un errore con iframe transparency=true
se si imposta l'opacità a zero, non sarà possibile visualizzare l'elemento a tutti - è necessario per definire il grado di opacità:
opacity: 0.25; /* all modern browsers */
filter: alpha(opacity=25) /* IE */
Quanto sopra CSS (nota: valori di opacità sono 0-100 per IE, 0-1 per altri browser) consentirà altri elementi dietro (ad es. un'immagine di sfondo della pagina) da mostrare, anche se l'elemento con l'impostazione di opacità ha uno sfondo colorato.
Per un maggiore controllo sulla trasparenza, vedere RGBA (A = alpha), ma fare attenzione al supporto del browser variabile.
in IE, il mio iframe va trasparente, ma la cosa è i cant in grado di vedere i miei contenuti all'interno del iframe anche .. – Bharanikumar
Puoi creare una pagina di esempio? Se il contenuto dell'iframe è totalmente invisibile, allora suppongo (senza vedere) che: non sta ottenendo il contenuto dell'iframe, il contenuto sta ereditando un'altra impostazione CSS, o (ovvio, ma vale la pena controllare) che la proprietà del colore è la stessa di il colore di sfondo. Imposta il colore su rosso e rimuovi la regola di opacità: continua a non apparire? –
Innanzitutto, non esiste "trasparenza =" true "", quindi non funzionerà.
In secondo luogo, stai cercando di rendere trasparente lo sfondo o l'intero iframe trasparente?
La proprietà Opacity CSS rende tutto ciò che si trova all'interno di qualsiasi elemento su trasparente. L'opacità scala da 0 a 1, dove 0 è completamente trasparente, 0,5 è semitrasparente e 1 è completamente visibile.
Se lo si utilizza su un div o su un iframe (o altro) lo sfondo e il testo saranno tutti ugualmente sbiaditi.
D'altra parte, in ogni browser moderno è possibile impostare il backround in modo che sia parzialmente trasparente utilizzando il colore RGBA. Si dovrebbe fare in questo modo: definizione del colore
iframe.transparent {
background-color: #FFF; /*this gives a background color for browsers that can't do RGBA color, like internet explorer*/
background-color: rgba(255,255,255,0.5);
}
Il RGBA funziona esattamente come l'attributo di opacità (0 = trasparente, 1 = solido), tranne che fa solo l'elemento specifico lo si imposta su trasparente e non influisce gli oggetti all'interno di quell'elemento (cioè non influisce sul testo all'interno del tuo iframe). I primi tre numeri sono i valori rosso, verde e blu del tuo colore su una scala da 0 a 255.
Se vuoi una soluzione cross-browser migliore, però, ti consiglio di usare solo un file .png trasparente file come immagine di sfondo.Dovrai testarlo su IE, non so se funzionerà specificamente per un iframe, ma non potresti impostare alcun background sull'iframe e quindi impostare l'immagine trasparente come sfondo della pagina che carichi all'interno dell'iframe (applicalo per l'elemento del corpo per quella pagina).
Spero che questo aiuti!
questo è un cambiamento, come per esempio sopra campione,
Puoi condividere un link alla pagina su cui stai lavorando in modo da poter dare un'occhiata all'intero codice? – Andrew
C'è un modo che si può fare questo con jQuery se hai inserito il file jQuery -
<!--[if lt IE 9]><script> $(".classname").attr("allowTransparency", "true"); </script><![endif]-->
Change .classname a quella del vostro iframe o fare uno se non ce n'è uno. (Estragga anche l'attributo dall'iframe) Mettilo subito dopo il tag di chiusura dell'iframe e aggiunge nel tag allowTransparency richiesto per i browser prima di IE9. Poiché è all'interno dell'istruzione condizionale IE, non viene letto dal validatore W3C. Inoltre elimina la compatibilità tra browser e il contenuto nascondendo i problemi con l'aggiunta di tutti i CSS che le persone hanno già menzionato, se si utilizza comunque l'ultima versione di jQuery. L'attributo allowTransparency è stato creato con uno scopo chiaramente definito, quindi non c'è motivo di provare a ricrearlo con CSS quando puoi semplicemente inserirlo silenziosamente. Spero che questo aiuti qualcuno!
(Questo metodo presuppone che dispone già di iframe {background-color:transparent} che non funziona su versioni precedenti di IE)
+1 per provare effettivamente a fornire un modo alternativo, che è stato richiesto. Non ho davvero provato però. –
Qui non è necessario coinvolgere jQuery. Questo è sufficiente: document.getElementById ("yourframeid"). AllowTransparency = true; – tomg
Per auto-quotare "** se ** l'hai installato". Non ho detto che dovevi installarlo solo per farlo. Se non l'hai fatto, allora sono d'accordo che la tua strada sarebbe migliore. –
Questo attributo potrebbe non essere così ampiamente utilizzato come credi, hai visto se effettivamente ha cambiato il comportamento sui browser diversi da IE? Per quanto posso dire questo è un attributo specifico IE e gli altri browser hanno l'impostazione predefinita per consentire la trasparenza sugli iframe e ignorare semplicemente questo attributo. –
Rileggi la mia risposta. La risposta alla tua domanda è già lì. –
@ james.garriss Ho letto la tua risposta e tu specificatamente scrivi che tutti i browser supportano l'attributo, non la sua funzionalità. I browser non di Internet Explorer si comportano come si comporta Internet Explorer (8 e sotto, apparentemente) (quando l'attributo è impostato per esso) anche quando l'attributo non è impostato per essi. Chrome non sembra supportare la proprietà DOM. Cosa pensi esattamente che supporti? – PhistucK