Questo articolo ti introdurrà al concetto che ti aiuterà a comprendere l'opacità in e dirti come controllare questo parametro. I seguenti suggerimenti saranno trattati in questo articolo,
- Opacità in CSS
- Opacità ereditata con elementi a cascata
- Impostazione dell'attributo RGBA per elementi a cascata
- L'opacità cambia sull'effetto al passaggio del mouse
L'opacità dello sfondo di un elemento è un'utile impostazione di funzionalità nella progettazione HTML. Impostando il livello di opacità (inverso della trasparenza), un designer può controllare la visibilità dell'elemento tramite la proprietà CSS opacity. Questo è generalmente usato come impostazione di sfondo quando c'è una cascata di elementi, posti uno sopra l'altro.
Lo scenario più comune in cui viene utilizzata questa funzione è questo:
- Un'immagine di sfondo parzialmente trasparente viene posizionata dietro un elemento di testo.
- L'immagine di sfondo è leggermente visibile, quindi non domina il testo davanti.
- L'immagine può essere completamente a fuoco quando l'utente sceglie esplicitamente di vederla.
Potresti voler leggere su prima di iniziare a conoscere l'opacità CSS.
Per un tutorial CSS completo, visita Edureka CSS Tutorial per principianti . Otterrai un eccellente avvertimento sul modo in cui i CSS devono essere utilizzati per aumentare il web design HTML.
Andando avanti con questo articolo su Opacity in CSS
Opacità in CSS
In CSS, Opacity è impostato come un valore numerico compreso tra 0,0 e 1,0. I valori più vicini a zero rappresentano una maggiore trasparenza, l'immagine sarà molto chiara in visibilità. Cominciamo con un esempio di un'immagine mostrata con il 50% di trasparenza. Vedere l'esempio 1 di seguito.
Esempio 1: immagine di sfondo impostata su semi trasparenza
img {opacity: 0.5 filter: alpha (opacity = 50) / * For IE8 e precedenti * /} 
Esempio 1: output
Immagine originale (100% di opacità)
Immagine con impostazione di opacità del 50%
Nell'esempio sopra, c'era solo un elemento: un'immagine. Altri elementi possono anche essere impostati con il parametro opacity come testo, elementi div e così via.
Andando avanti con questo articolo su Opacity in CSS
Opacità ereditata con elementi a cascata
Quando gli elementi sono impilati uno sull'altro, se l'elemento di sfondo ha l'impostazione di opacità, viene ereditato da tutti gli elementi figlio. Questo è il impostazione predefinita . Ciò significa che se una casella di testo viene posizionata su un'immagine e l'immagine ha un'impostazione di opacità di 0,5, sia l'immagine che l'elemento di testo saranno solo parzialmente visibili.
Prendiamo l'istanza di un elemento di testo figlio posizionato sopra l'immagine TOM & JERRY nel nostro prossimo esempio. Possiamo vedere l'effetto di opacità predefinito nell'esempio 2.
.container {position: relative text-align: center opacity: 0.5} .centered {position: absolute top: 50% left: 50% transform: translate (-50%, -50%) color: blue font-size: 40px} } TOM & JERRYEsempio 2: il testo eredita l'opacità dall'immagine principale
Andando avanti con questo articolo su Opacity in CSS
Impostazione dell'attributo RGBA per elementi a cascata
C'è un altro modo in cui l'opacità può essere controllata con elementi a cascata. Se vuoi che l'elemento figlio rimanga inalterato dall'opacità del suo elemento di sfondo, puoi usare Impostazione dell'attributo RGBA .
Esempio 3: utilizzo dell'impostazione RGBA
sfondo: rgba (76, 175, 80, 1.0) / * L'immagine non ha impostazioni di opacità * / / * Sfondo verde per testo con opacità del 100% * / / * Il testo di colore blu ha un'opacità del 100% * /
sfondo: rgba (76, 175, 80, 0.4) / * L'immagine non ha impostazioni di opacità * / / * Sfondo verde per testo con 40% di opacità * / / * Testo blu ancora visibile con 100% di opacità * /
Dopo il codice colore RGB, l'attributo 'a' sta per alfa . Il alfa il parametro è un numero compreso tra 0.0 (completamente trasparente) e 1.0 (completamente opaco).
Andando avanti con questo articolo su Opacity in CSS
L'opacità cambia sull'effetto al passaggio del mouse
In alcuni scenari, i web designer vogliono che l'opacità vari a seconda che l'utente sia focalizzato o meno sull'elemento. Ad esempio, supponiamo che un'immagine sia impostata al 50% di opacità per impostazione predefinita. Tuttavia, quando l'utente passa il mouse sull'immagine, vogliamo che l'immagine sia completamente a fuoco con un'opacità del 100%.
come usare gli scanner in java
L'esempio 4 mostra come eseguire questa operazione.
Punti comuni da notare:
- L'impostazione dell'opacità è un'alternativa all'utilizzo dell'attributo 'visibilità' nei CSS. Tuttavia, l'utilizzo dell'impostazione di opacità semplifica l'impostazione di vari gradi di trasparenza, da zero a pieno.
- Il livello di opacità deve essere impostato dopo attenti test in vari browser. Quando l'opacità è impostata su valori bassi, a volte il testo o l'immagine possono diventare completamente invisibili o illeggibili.
- L'idea alla base dell'utilizzo dell'opacità è di mettere a fuoco alcuni elementi mentre altri elementi di sfondo non distraggono l'attenzione dell'utente. Quindi tali elementi di sfondo sono impostati con un'opacità inferiore.
- In Internet Explorer, per IE8 e versioni precedenti, la proprietà di opacità è un'impostazione di 'filtro' compresa tra 1 e 100. In tutti gli altri browser, è compresa tra 0 e 1.
Questo ci porta alla fine di questo articolo sull'opacità nei CSS.
Se sei interessato a saperne di più sullo sviluppo web, dai un'occhiata al di Edureka. La formazione sulla certificazione per lo sviluppo web ti aiuterà a imparare come creare siti Web straordinari utilizzando HTML5, CSS3, Twitter Bootstrap 3, jQuery e API di Google e a distribuirli su Amazon Simple Storage Service (S3).
Se sei ancora interessato Se hai qualche domanda, puoi pubblicarla nella sezione commenti di questo blog 'Opacity In CSS' e ti risponderemo il prima possibile.