Visibilità CSS - soluzione cross-browser - 3,8 su 5 sulla base di 6 voti

In ogni livello del mondo possiamo vedere la trasparenza CSS, sappiamo come dare diversi elementi della visibilità laterale e l'accesso alla piena compatibilità cross-browser, in modo che lo stesso effetto robotico in diversi browser.

Come impostare la trasparenza di qualsiasi elemento

CSS3 ha il potere dell'opacità per creare elementi trasparenti, quindi puoi zastosovuvat su qualsiasi elemento. In dato potereє valore da 0 a 1, segno di gradini di trasparenza. De 0 - trasparenza tse povna, (per il blocco di tutti gli elementi) e 1 opacità povna. I valori sono scritti in frazioni: 0.1, 0.2, 0.3 solo.

Esempio del Vikoristan:

Trasparenza tra browser

Non tutti i browser accettano la stessa implementazione della maggiore opacità. In alcuni casi, è necessario ottenere un altro nome per il potere o il filtro.

Potenza CSS3 opacità browser Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Così bene :) browser yak Internet Explorer fino alla versione 9.0 non tiene conto della potenza di opacità e trasparenza per cui browser è necessario modificare la potenza del filtro e il valore alpha(Opacity=X), per cui X - il numero intero compreso nell'intervallo 0 a 100 per l'aiuto del quale viene assegnato il valore di trasparenza. 0 è la piena trasparenza e 100 è la piena opacità.

Quanto costa browser Firefox fino alla versione 3.5 win power -moz-opacity sostituisce l'opacità.

Tali browser, come Safari 1.1 e Konqueror 3.1, ispirati al motore KHTML, usano l'opacità della trasparenza per la scansione: -khtml-opacity.

Come si imposta la trasparenza CSS in modo che appaia uguale in tutti i browser? Per creare una soluzione cross-browser per la trasparenza degli elementi, è necessario prescrivere non solo un'opacità del potere, ma il successivo insieme di poteri:

filtro: alfa(Opacità=50); /* Opacità per IE */ -moz-opacity: 0.5; /* Miniatura di Mozilla 3.5 e precedenti */ -khtml-opacity: 0.5; /* Konqueror 3.1 e Safari 1.1 trim */ opacità: 0.5; /* Aiuta a risolvere i browser */

Trasparenza di vari elementi

Diamo un'occhiata a deyaki, applichiamo il compito dell'intuizione elementi cantanti, che sono più spesso vicorated sul lato.

Trasparenza dell'immagine CSS.

Diamo un'occhiata alle opzioni per creare un bambino traslucido. Il calcio d'attacco della prima foto non ha una trasparenza, l'altro può avere una trasparenza del 50%, il terzo 30%.

Risultato:

Visibilità CSS quando si passa il mouse sopra un'immagine.

Spesso abbiamo bisogno di guardare l'immagine, altrimenti potrebbe esserci qualche altro elemento in quel momento, se il cursore è posizionato su di esso. Zrobiti tse possibile per Aiuta CSS pseudo-classe: hover. Per quale delle nostre immagini è necessario prescrivere due classi, una è superba - se l'immagine è inattiva e l'altra classe è pseudo-classe: passa il mouse, qui è necessario indicare la trasparenza dell'immagine al momento del passaggio del mouse il cursore.

Puoi vedere il risultato nella demo.

Sfondo chiaro con CSS.

Qui è necessario ricordare che la trasparenza si espande su tutti i contributi degli elementi e la puzza non può essere maggiore trasparenza dei contributi inferiori dell'elemento.

Come un calcio, creeremo un'opzione con uno sfondo laterale per un'immagine aggiuntiva e un blocco con uno sfondo per un colore e una trasparenza aggiuntivi del 50%.

Codice di esempio:

Asse al risultato del codice inserito:

orem Ipsum è semplicemente un'industria di stampa e composizione di testi fittizi. Lorem Ipsum è stato il testo fittizio standard del settore sin dal 1500, quando uno stampatore sconosciuto ha preso una cassetta di caratteri e l'ha rimescolata per creare un libro campione di caratteri e, più recentemente, con software di desktop publishing come Aldus PageMaker, comprese le versioni di Lorem Ipsum.
Questo è un buon fatto che dovresti essere consapevole del contenuto leggibile di una pagina quando guardi il suo layout. La prova dell'approvazione di Lorem Ipsum sono coloro che possono più o meno ampiamente spargere la voce, come puoi vincere "Premi qui, contenuti qui", facendolo sembrare un inglese leggibile. Molti pacchetti funzionanti e pagine Web di pagine Web che classificano Lorem Ipsum come testo di testo difettoso e cercano "lorem ipsum" cercheranno molti siti Web che sono nella loro infanzia. Varie versioni potrebbero essersi evolute nel corso degli anni, a volte per caso, a volte di proposito (umorismo iniettato e simili).

Otzhe, la mova pide di oggi trasparenza in html lati. Hai cantato insieme ai blocchi trasparenti di fusione, che fosse una galleria fotografica o una forma di autorizzazione su qualche sito popolare. Zastosuvannya prozorostі in html puoi conoscere l'impersonale. Quindi, come puoi combattere e de її può vincere?

Bene, per cominciare, possiamo vedere che il documento che abbiamo non è solo un'area piatta del monitor: sembra 3 mondi, di cui ho indovinato nell'articolo "Z-index". Vidpovidno navit zovsim prozory ball, appoggiato in cima alla pila di fermentazione, bloccando l'accesso ad altri elementi. Chi ha tutti uno dei principali blocchi prozorikh zastosuvan. Indipendentemente da quelli che suonano vittoriosi, si osserva l'effetto dell'ombreggiatura, ripeterò lo stesso la palla prozoria della pratica. Quindi, ad esempio, ci sono molte gallerie fotografiche popolari, è organizzata una sfera di ombreggiatura in cui vengono visualizzate le foto e gli elementi per gestirle. Tutto il resto sul lato della pagina appare "chiuso" (singolo) con una pallina che chiude l'accesso a tutti gli altri elementi sul lato. Totò. cinque dei lati, dopo aver premuto sugli yake, la forza non è uscita: l'intero testo è stato chiuso con una fodera. Per passare al corpo del sito, risuonano gli elementi di controllo per chiudere la galleria, formare bene l'ingresso. Per visualizzare/collegare a blocchi trasparenti per javascript aggiuntivo. Qui, purtroppo, non c'è alternativa a youmu. Senza yogo vikoristannya koristuvach altrimenti non puoi battere blocco trasparente, altrimenti non puoi chiuderla senza riempire il lato flusso. Designerò ciò che vince ai fini della visibilità o della visualizzazione del potere.

Quindi, come è organizzata la trasparenza in html? Migliorare la chiarezza degli elementi non è incluso nella specifica CSS, quindi è necessario conquistare una spolverata di istruzioni per la sua creazione. Alcuni browser funzioneranno con un'opzione, altri con un'altra. Cioè vikoristovu vbudovanuyu filtro funzionalità, e altri browser vikorivuyu potere "opacità", che è impostato nell'intervallo 0 (oggetto troppo chiaro) a 1 (troppo opacità). Ad esempio, a colpo d'occhio con il 30% di trasparenza, dopo aver scritto " opacità: 0,30; filtro: alfa (opacità = 30); La potenza, come si può vedere dal calcio, è simile: solo nel primo caso c'è un numero di vittorie da 0 a 1, l'altro ha un record. Un esempio di un tale blocco:

Al calcio c'è un blocco che mostra il video, che si attiva quando l'orso viene premuto sulla miniatura del videoclip. L'altezza non è impostata per il blocco; In connessione con il chim vinto vengono calcolati dinamicamente quando il video viene riprodotto. Il calcio del vikoristannya tsієї tekhniki può essere trovato nella pagina principale del sito ruscircus.ru, su cui ho lavorato ai miei tempi.

Axis, vlasne e tutto il segreto della trasparenza in html. Usiamo z-index e opacità per sottrarre l'effetto di trasparenza. Eppure puoi conoscere qualcuno senza volto: qui tutto è circondato solo dalla tua immaginazione.

08.02.2013 Diamo un'occhiata al cibo, ai compiti ai commenti ea chi cresce sul blocco trasparente dell'opacità. Qui tutto è semplice, non per niente ho chiesto il materiale per il materiale relativo allo z-index, è necessario creare un blocco in più, con uno z-index più grande, più basso per quello trasparente. L'asse subito, per uno spratto di khvilin, lanciando sul calcio. blocchi:

Io funzioni in javascript

La prima funzione sta visualizzando un blocco trasparente (subito da un blocco testuale opaco) - può essere collegato a un pulsante. inviato, ecc. Un'altra funzione che ho legato al clic di un orso sul blocco con il testo: c'è un blocco chiaro.

Sono in grado di portare chiarezza a chi sta lavorando. Bene, se no, metti del cibo.

Creazione di sfondi trasparenti in HTML e CSS (effettivamente opacità e RGBA)

L'effetto della trasparenza delle bevande ricorda bene l'elemento sullo sfondo piccolo e allargalo in diversi sistemi operativi, in modo che appaia elegante e bello. Il sudiciume della madre sotto i blocchi inebrianti non è un bambino monofonico, ma un'immagine, allo stesso modo la trasparenza diventa commemorativa.

Un tale effetto può essere ottenuto in vari modi, inclusi metodi antiquati, come il decadimento, la creazione di un'immagine mappata e il potere dell'opacità. E proprio come una piccola colpa per la necessità di lavorare nel blocco, è come se fosse marcio, per questi metodi ci sono rovesci inaccettabili.

Diamo un'occhiata alla trasparenza del testo e dello sfondo: è giusto evidenziare nel design del sito:

La caratteristica principale del potere dell'autorità sta nel fatto che il significato della trasparenza è su tutti gli elementi figli nel mezzo, e non solo sugli afidi. Tse significa che lo sfondo e il testo diventeranno traslucidi. Puoi aumentare la trasparenza modificando il comando di opacità da 0,1 a 1.

HTML 5 CSS 3 IE 9

Nel web design, anche la trasparenza è spesso stagnante e raggiunge il formato colore RGBA, che è più appropriato per lo sfondo dell'elemento.

Suono al design, rendiamo più facile vedere gli elementi e il testo è opaco per salvare la leggibilità. Il potere dell'opacità non è adatto qui, perché spesso sarà visibile anche il testo al centro dell'elemento. È meglio utilizzare il formato RGBA, di cui parte è il canale alfa, o in altre parole, il valore della trasparenza. Come il significato è scritto rgba, quindi alle tempie, attraverso le quali vengono rifatti i significati delle componenti rosse, blu e verdi del colore. Fermiamo la visibilità, poiché è impostata da 0 a 1, con il quale significa 0 completamente trasparenza e 1 opacità del colore: la sintassi rgba.

Napіvprozora tlo HTML 5 CSS 3 IE 9

Per creare l'effetto di trasparenza nei CSS, viene utilizzato il potere dell'opacità.

Browser IE8 e versioni precedenti supportano alimentazione alternativa - filter:alpha(opacity=x) , quindi "x" può accettare un valore compreso tra 0 e 100 , un valore più piccolo renderà l'elemento più chiaro.

Tutti gli altri browser rispettano il potere CSS standard dell'opacità, quindi possono accettare valori come da 0.0 a 1.0, più basso è il valore, più trasparente sarà l'elemento:

Tentativo

Trasparenza quando si è in bilico

Pseudo-class:hover consente di modificare l'aspetto degli elementi quando si passa sopra il mouse. Stiamo velocizzando la possibilità, in modo che l'immagine, quando si passa il mouse, perda la sua nitidezza:

Tentativo

trasparenza sullo sfondo

Esistono due modi possibili per creare un elemento: il potere dell'opacità, descritto sopra, e la colorazione dello sfondo in formato RGBA.

Potresti già conoscere il modello di colore del formato RGB. RGB (rosso, verde, blu - rosso, verde, blu) è un sistema di colori che definisce il modo di mescolare i colori rosso, verde e blu. Ad esempio, per impostare un colore giallo per il testo, puoi accelerare se sei uno degli stordimenti imminenti:

Colore: RGB(255,255,0); colore: RGB(100%,100%,0);

I colori, compiti per l'aiuto dell'RGB, vengono presi in considerazione in base ai sedicesimo valori, che abbiamo scelto, che ci consentono di cambiare il canale alfa della trasparenza. Tse significa che lo sfondo dell'elemento con trasparenza alfa è visibile a coloro che si trovano sotto di esso.

L'ambiguo colore RGBA è simile alla sintassi delle regole RGB standard. Tuttavia, a parte questo, dovremo specificare il valore RGBA (sostituendo RGB) e impostare un ulteriore decimo valore di trasparenza dopo il valore del colore nello spazio tra 0,0 (trasparenza completa) e 1 (opacità completa).

Colore: RGB(255,255,0,0,5); colore: rgba (100%, 100%, 0,0,5);

La differenza tra il potere dell'opacità e RGBA sta nel fatto che il potere dell'opacità zastosovuyu trasparenza all'intero elemento, in modo che l'intero elemento diventi trasparente. E RGBA consente di impostare la trasparenza sulle parti esterne dell'elemento (ad esempio solo il testo o lo sfondo):

Body ( background-image: url(img.jpg); ) .prim1 ( width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter : alpha(opacity=70);/*per IE8 e versioni successive*/ text-align: center; 1px nero pieno; font-weight: grassetto; text-align: center; ) Prova »

Nota: i valori RGBA non sono supportati da IE8 o browser precedenti. Per fare il fallback del colore per i browser meno recenti, in modo da non ritagliare i valori di colore con i canali alfa, impostarlo sul primo valore RGBA: background: rgb(255,255,0); sfondo: rgba(255,255,0,0,5);

/* 06.07.2006 */

Trasparenza CSS (opacità CSS, opacità javascript)

L'effetto della trasparenza è il tema di questo articolo. Come fai a sapere come rendere trasparenti gli elementi del lato html, come usare CSS o Javascript e come ottenere la compatibilità cross-browser (stesso lavoro in diversi browser) con miglioramenti del browser in Firefox, Internet Explorer, Opera, Safari , Konqueror, sei il benvenuto. Fino ad allora, diamo un'occhiata alla soluzione del cambiamento graduale della chiarezza con l'aiuto di JavaScript.

Opacità CSS (trasparenza CSS)

Simbiosi di opacità CSS

Sotto la simbiosi, potrei voler combinare stili diversi per browser diversi in una regola CSS per rimuovere l'effetto necessario, cioè. per l'implementazione della compatibilità cross-browser.

Filtro:progid:DXImageTransform.Microsoft.Alpha(opacità=50); /* IE 5.5+*/ -opacità moz: 0.5; /* Mozilla 1.6 e precedenti */ -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 *//* CSS3 - Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9*/

In effetti, abbiamo bisogno della prima e dell'ultima regola, per IE5.5+ e browser, per capire l'opacità dei CSS3, e le due regole in mezzo ovviamente non si tirano indietro, ma nemmeno rispettano (tu stesso, devi puzzare ).

Simbiosi di opacità di Javascript

Ora possiamo provare a installare la trasparenza tramite lo script con la correzione delle funzionalità dei diversi browser, descritte sopra.

Funzione setElementOpacity(sElemId, nOpacity) ( var opacityProp = getOpacityProperty(); var elem = document.getElementById(sElemId); if (!elem || !opacityProp) return; // Continuo a non utilizzare l'elemento e assegna un id, altrimenti il ​​browser non supporta la funzione nativa del modo per cancellare la visibilità if (opacityProp=="filtro") // Internet Exploder 5.5+ (nOpacity *= 100; // Se la trasparenza è già impostata, può essere modificata tramite la raccolta di filtri, altrimenti la trasparenza può essere aggiunta tramite style.filter var oAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filtri.alfa; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")"; // Per non sovrascrivere altri filtri, possiamo "+=") altro // Altri browser elem.style=nOpacità; ) funzione getOpacityProperty() ( if (typeof document.body.style.opacity == "string") // Conforme a CSS3 (Moz 1.7+, Safari 1.2+, Opera 9) restituisce "opacità"; else if (typeof document.body.style.MozOpacity == "string") // Mozilla 1.6 e versioni precedenti, Firefox 0.8 restituisce "MozOpacity"; else if (typeof document.body.style.KhtmlOpacity == "string") // Konqueror 3.1, Safari 1.1 return "KhtmlOpacity"; else if (document.body.filters && navigator.appVersion.match(/MSIE ([\d.]+);/)>=5.5) // Internet Exploder 5.5+ return "filter"; restituire falso; //Nessuna trasparenza }

La funzione accetta due argomenti: sElemId - ID elemento, nOpacity - un numero vocale da 0.0 a 1.0 imposta la trasparenza dello stile di opacità CSS3.

Penso che sia una buona idea spiegare parte del codice setElementOpacity che precede IE.

VaroAlpha = elem.filters["DXImageTransform.Microsoft.alpha"] || elem.filtri.alfa; if (oAlpha) oAlpha.opacity = nOpacity; else elem.style.filter += "progid:DXImageTransform.Microsoft.Alpha(opacity="+nOpacity+")";

Puoi incolpare il cibo, ma perché non installare la trasparenza con un percorso per attirare (=) potere elem.style.filter = "..."; ? Come vincere "+=" da aggiungere alla fine del filtro power row? La risposta è semplice, per non "sovrascrivere" gli altri filtri. E se è così, se aggiungi un filtro in un tale rango all'improvviso, non cambierai il valore di quel filtro in precedenza, ma se si sta solo aggiungendo alla fine delle righe di potere, non è corretto. Per questo, come filtro prima degli inserimenti, è necessario manipolarlo attraverso la raccolta di filtri che sono stati impostati sull'elemento: elem.filters (ma controlla, poiché il filtro non è ancora stato assegnato all'elemento, allora è impossibile manipolarlo attraverso la raccolta data). L'accesso agli elementi della collezione è possibile sia sul nome del filtro che sull'indice. Tuttavia, il filtro può essere impostato su due stili, lo stile IE4 breve o lo stile IE5.5+, che è trattato nel codice.

Modifica graduale della trasparenza dell'elemento

Soluzione pronta. Libreria della vittoria opacity.js

fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/strawberry.jpg" width="100" height="80" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/tomato.jpg" width="82" height="100" /> fadeOpacity(this.id, "oR1")"onmouseout=" fadeOpacity.back(this.id)"src="/img/sweet_cherry.jpg" width="98" height="97" />

Tagli di base:

1. Collegamento della libreria di funzioni;
2. Viznazhemo governa il metodo vikoristovuyuchi fadeOpacity.addRule();
3. Facciamo clic sul metodo dissolvenza opacità() modificare la trasparenza dal valore cob al valore finale, o fadeOpacity.back() passare al valore pannocchia di uguale chiarezza.

Rozzhovuemo

Come collegare la libreria, immagino, si può vedere di più dal calcio. Ora il passo successivo è spiegare lo scopo delle regole. Il primo passo è cambiare il metodo per modificare in modo fluido la trasparenza, è necessario designare le regole che verranno utilizzate per il processo: è necessario designare l'apertura all'inizio e alla fine della finestra e navigare, per l'errore, per indicare il parametro di dissolvenza, che inietta la velocità nel processo di modifica della trasparenza.

Le regole sono assegnate a un metodo aggiuntivo fadeOpacity.addRule

Sintassi: fadeOpacity.addRule(sRuleName, nStartOpacity, nFinishOpacity, nDalay)

Argomenti:

• sRuleName - il nome della regola che è stata impostata a sufficienza;
• nStartOpacity e nFinishOpacity - pannocchia e apertura finale, numeri nell'intervallo da 0,0 a 1,0;
• nDelay - ritardo in millisecondi (argomento neobov'yazkovy, per il blocco, fino a 30).

Lo stesso fader di visibilità può essere eseguito tramite il metodo fadeOpacity(sElemId, sRuleName), dove sElemId è l'id dell'elemento e sRuleName è il nome della regola. Per ruotare la visibilità del campo di uscita, viene cambiato il metodo fadeOpacity.back(sElemId).

:hover per un semplice cambio di visibilità

Indicherò anche che per una semplice modifica della trasparenza (ma non una modifica graduale), lo stesso pseudo-selettore è adatto : passa il mouse, che consente di assegnare lo stile di un elemento al momento del passaggio del mouse su un nuovo mouse.

Si noti che l'immagine è posizionata al centro dell'elemento A. A destra, in Internet Explorer fino alla versione 6, si intende lo pseudo-selettore :hover, solo 100% posilan, e non tali elementi, amano mentire con CSS (in IE7, la posizione è stata corretta).

Chiarezza e testo frastagliato in IE

L'uscita di Windows XP è stata la levigatura dei caratteri dello schermo con il metodo tipo chiaro e allo stesso tempo effetti collaterali in IE quando si utilizza il metodo di levigatura. A nostro avviso, poiché la visibilità dell'elemento con il testo è bloccata quando è abilitato il metodo di smoothing ClearType, il testo smette di essere visualizzato normalmente (testo in grassetto - grassetto, ad esempio, per raddoppiare, diversi artefatti possono apparire in questo modo, ad esempio in una figura che sembra un testo frastagliato). Per correggere la posizione, per IE è necessario impostare il colore di sfondo, CSS power colore di sfondo, elemento a cui la trasparenza è stagnante. Fortunatamente in IE7 il bug è stato corretto.