Oggi sta diventando la creazione di siti webvera arte. Questo non è solo un insieme di elementi di pagina di un certo colore e dimensione, caratteri di diversi stili e disegni tematici. Al fine di rendere il sito diverso dagli altri, per attirare l'attenzione dei visitatori e indirizzarlo verso determinati elementi, viene utilizzato un numero enorme di metodi e strumenti. Tra questi c'è una proprietà css molto popolare: la trasparenza. Questa tecnica è abbastanza alla moda e spettacolare, e quindi viene spesso utilizzata. Puoi dare trasparenza a vari oggetti della pagina del sito, ad esempio testo, un intero blocco o un'immagine. Si ottiene anche in vari modi. Considerali di seguito.
Impostazioni di trasparenza dell'articolo
Parametri per la regolazione del gradoalcuni elementi di trasparenza. Vengono utilizzati in base a obiettivi specifici, nonché al browser per il quale il design è "personalizzato". Questi includono le seguenti proprietà:
- opacità;
- filtro;
- Immagine PNG come sfondo.
I valori della "trasparenza" della proprietà CSS cambianocome segue: maggiore è il numero, minore è il livello di trasparenza dell'elemento. Nell'opacità, varia da 0 a 1, nel filtro, da 10 a 100. Quest'ultimo viene utilizzato per il browser Interet Explorer e, per tutti gli altri, viene utilizzata la proprietà di opacità.
Trasparenza dell'immagine (variabile)
Cominciamo con l'opzione quando apparirà la trasparenza quando si passa con il mouse sopra un elemento del cursore del mouse.
Considera come impostare la trasparenza dell'immagine. CSS offre due opzioni. Per fare ciò, è necessario registrarlo direttamente nel codice del documento html come segue:
- Specifica il percorso dell'immagine.
- Determiniamo le opzioni di trasparenza al passaggio del mouse e no. Per fare ciò, utilizzare le proprietà onmouseover e onmouseout, in cui vengono prescritti i valori di opacità e filtro.
Le stesse caratteristiche possono essere registrate nel documento css e nel codice sorgente aggiungere solo un collegamento ad esso. I risultati saranno gli stessi.
Trasparenza del testo e dei blocchi di pagine
Per quanto riguarda il testo o il blocco (trasparenza div),css suggerisce di utilizzare un'opzione simile alla creazione di trasparenza dell'immagine, ovvero utilizzare un file css collegato in cui verranno impostati i parametri necessari. Puoi andare in un modo più semplice. Quando si impostano gli stili del blocco di stile div o del testo p, scrivere il seguente codice html per gli elementi onmouseover e onmouseout. Entrambe le opzioni funzionano e danno il risultato desiderato.
Costante di trasparenza
In alcuni casi, la trasparenza di un oggetto, elemento di design o testo deve essere impostata su base continuativa. In questa situazione, la soluzione è ancora più semplice che passare con il mouse sopra il mouse.
Per l'elemento css verrà impostata la trasparenzaseguente codice. Nel blocco di stile div, specificare i valori di sfondo (ad esempio, # ff8800), opacità (ad esempio 0,5), larghezza e riempimento.
Per un'immagine, aggiungiamo i valori di opacità e filtro al codice e indichiamo anche il percorso dell'immagine.
Metodo RGBA
Ci sono altri casi d'uso.di questa proprietà css: la trasparenza può essere applicata al colore di sfondo di qualsiasi elemento di design. Per fare ciò, utilizzare il metodo RGBA. Le prime tre lettere indicano i colori principali (rosso, intero, blu) e l'ultimo - alfa, che imposta il livello di trasparenza. Usando il formato RGBA, prescriviamo il grado di trasparenza, indicandolo nell'ultima cifra. Ad esempio, in questo modo: background: rgba (240,2,33,0,4035).
conclusione
Quindi usando mentre ci si lavoraIl design del sito è una proprietà "trasparenza" semplice ma efficace, puoi rendere i suoi elementi più interessanti e evidenti con il minimo sforzo. Le opzioni descritte per specificare le caratteristiche di trasparenza ti aiuteranno in questo.
