CSS
HTML
JavaScript
PHP
Introduzione
Coming Soon
Generatori
Varie

CSS opacity

La proprietà CSS3 opacity imposta la trasparenza dell'elemento

La proprietà opacity di CSS3 consente di regolare il livello di trasparenza di un elemento. Il valore può variare da 0 (invisibile) a 1 (completamente visibile), permettendo effetti visivi di sovrapposizione, fade-in/out e layering.

Sintassi

opacity: valore;

Significato dei valori principali:

  • 0: l'elemento è completamente trasparente e non visibile.

  • 1: l'elemento è completamente visibile (valore predefinito).

  • Valori decimali tra 0 e 1: controllano il livello di trasparenza in modo graduale.

  • Valori intermedi: Controllano il livello di trasparenza in modo graduale tra 0 e 1: (ad esempio, 0.5, 0.7, 0.2, ecc.)


Esempio proprietà: opacity


Codice Esempio: opacity

CODE: CSSpreleva codice
  1. .opacity-example {
  2.   width: 300px;
  3.   height: 200px;
  4.   background-color: #007acc;
  5.   color: white;
  6.   font-size: 20px;
  7.   text-align: center;
  8.   line-height: 200px;
  9.   opacity: 0.5; /* 50% trasparente */
  10.   border-radius: 8px;
  11. }

Contenuto Esempio: opacity

Esempio di utilizzo di opacity

In questo esempio, la proprietà opacity viene usata per rendere un elemento parzialmente trasparente:


Elemento non trasparente blu
Elemento trasparente rosso

CSS e HTML per l'elemento con trasparenza:

  
  <style>
    .container {
      position: relative;
    }

    .opacity-example {
      width: 300px;
      height: 200px;
      background-color: #007acc;
      color: white;
      font-size: 20px;
      text-align: center;
      line-height: 200px;
      border-radius: 8px;
    }

    .opacity-example-2 {
      width: 250px;
      height: 150px;
      background-color: #ff6347;
      color: white;
      font-size: 20px;
      text-align: center;
      line-height: 150px;
      opacity: 0.5; /* 50% trasparente */
      border-radius: 8px;
      position: absolute;
      top: 50px;
      left: 50px;
    }
  </style>

  <div class="container">
    <div class="opacity-example">
      Elemento non trasparente blu
    </div>

    <div class="opacity-example-2">
      Elemento trasparente rosso
    </div>
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser

Browser Support

I Cookie su questo sito:

Il nostro sito utilizza cookie e altre tecnologie in modo tale che sia noi, sia i nostri partner, possiamo ricordarci di te e capire come tu e gli altri visitatori utilizzate il nostro sito. Qui puoi trovare ulteriori informazioni sui cookie e le altre tecnologie. Chiudendo questo banner o continuando la navigazione acconsenti all'uso dei cookie. Acconsento Info Cookies