Opacità nei CSS è una proprietà che specifica di controllare la trasparenza di elementi come contenuto O immagini . Utilizzando questa proprietà, possiamo impostare qualsiasi immagine in modo che sia completamente opaca ( visibile ), completamente trasparente ( nascosto ) o traslucido (parzialmente visibile). Assume un valore numerico compreso tra 0 e 1. Dove 0 definisce completamente trasparente e 1 definisce completamente visibile. I valori di opacità compresi tra 0 e 1, come 0,2, 0,4, 0,6, ecc., modificano un'immagine da trasparente a opaca aumentando gradualmente il valore decimale.
Sintassi
opacity :
Il valore numerico deve essere compreso tra 0 e 1 per rendere l'immagine semitrasparente. Se forniamo 1 l'immagine risulterà opaca, se il valore numerico è 0 l'immagine diventerà completamente trasparente.
Esempio 1 : In questo esempio, utilizzeremo la proprietà opacità per rendere l'elemento trasparente quando si sposta il mouse sull'elemento.
Main.html
Simple example to display the Opacity .get { background: red; width: 300px; height: 250px; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; } .get:hover { // hover is used to show the impact on element when the mouse on the element. opacity: 0.5; // set the opacity value to 0.5 } // use of class in CSS. Produzione
come sapere se qualcuno ti ha bloccato su Android
Passa il mouse sopra la casella rossa per visualizzare un effetto di trasparenza o opacità.
Opacità di transizione nei CSS
Nei CSS, a opacità di transizione è una proprietà utilizzata per modificare gradualmente lo stato di opacità da un livello a un altro. Significa che l'opacità della transizione cambia lo stato dell'elemento opaco in trasparente con una durata temporale definita. La transizione ha quattro proprietà: proprietà di transizione, durata della transizione, funzione di temporizzazione della transizione e ritardo di transizione, utilizzate per eseguire l'effetto di opacità su un'immagine. IL durata della transizione è una proprietà importante per cambiamenti graduali o improvvisi che riflettono l'effetto di opacità su un elemento per una durata di tempo definita in millisecondi o secondi.
La proprietà abbreviata della transizione è la seguente:
transition: [transition - property] [transition -duration] [transition -timing -function] [transition - delay];
Sintassi per definire l'opacità della transizione nei CSS
{ transition: opacity 5s; opacity: 1; // set opacity property to 1, completely visible } Or { transition: opacity 0.3s linear 2s; // effect on 0.3 millisecond } Proprietà di transizione
Di seguito sono riportate le proprietà di transizione utilizzate per controllare gli effetti di transizione.
| Valore | Descrizione |
|---|---|
| Proprietà di transizione | Viene utilizzato per definire il nome della proprietà CSS che mostra l'effetto di transizione sulle immagini. |
| Durata della transizione | Viene utilizzato per definire il periodo di tempo in secondi o millisecondi per visualizzare l'effetto di transizione. |
| Funzione di temporizzazione della transizione | Viene utilizzato per definire la curva di velocità su un'immagine per mostrare l'effetto di transizione. |
| Ritardo di transizione | Specifica se l'effetto di transizione viene avviato sull'elemento o sull'immagine. |
Nota: durante l'impostazione della proprietà di transizione sull'immagine o sui contenuti, dobbiamo definire la proprietà della durata della transizione; altrimenti la durata diventa 0 e non mostrerà alcun effetto.
La necessità di opacità di transizione nei CSS
IL opacità è una semplice proprietà CSS utilizzata per controllare la trasparenza di un'immagine impostando l'intervallo di opacità da 0 a 1. Riflette il cambiamento statico o improvviso su un elemento per mostrare l'effetto di opacità. Ad esempio, se vogliamo visualizzare un'immagine come trasparente, dobbiamo impostare il valore di opacità da 0 a 1. Dopodiché, mostrerà immediatamente l'effetto di opacità invece di impiegare del tempo. Pertanto, utilizziamo a opacità di transizione nei CSS che controlla la trasparenza di un elemento per un periodo di tempo definito. Utilizzando la funzione tempo di transizione nell'opacità di transizione, possiamo determinare la curva di velocità di un elemento che specifica l'effetto di opacità veloce su un'immagine. In questo modo, utilizziamo l'effetto di opacità di transizione per riflettere i cambiamenti nel periodo di tempo specificato invece di verificarsi immediatamente.
Esempio 2: In questo esempio, utilizzeremo la proprietà dell'opacità di transizione che riflette l'effetto dell'opacità in un periodo di tempo specificato anziché immediatamente.
File1.html
CSS transition opacity Property .pr{ width: 400px; height: 300px; background: lightgreen; position: relative; } .cr{ width: 270px; height: 200px; position: absolute; /* top: 30px; */ left: 30px; color: white; margin: 40px auto; margin-bottom: 30px; font-family: Arial, Helvetica, sans-serif; background: red; font-weight: Bold; font-size: 36px; opacity: 0; } .cr:hover { opacity: 1; transition: opacity 2s ease-out; /* It slowly shows the element as we place the mouse on the box and when the time reaches 2 seconds, it is fully visible. */ -webkit-transition: opacity 2s ease-out; -moz-transition: opacity 2s ease-in-out; } JavaTpoint: Best Tutorial Site Check link is working <br> <p> https://www.javatpoint.com/ </p> Produzione
