Sono Andrea Tonin dello studio Luce Digitale di Rovigo, mi occupo per lavoro di web design per compagnie e marchi internazionali. Con questo corso gratuito vorrei introdurvi alla programmazione dei fogli di stili, detti CSS.

Il CSS3 ha introdotto una nuova specifica per assegnare la trasparenza alle immagini e agli elementi, la funzione opacity

Vediamo una semplice struttura che incorpora la funzione opacity:

<!DOCTYPE html>
<html>

<head>
<title>Titolo del documento</title>

<style type="text/css">
/* assegno immagine di sottofondo rgb */ 
.bgimg {
  background-image: url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/06/pattern_diagonali.png);
}
/* assegno opacità al 100% */ 
.opac1 {opacity: 1;}
/* assegno opacità al 50% */ 
.opac2 {opacity: 0.5;}
/* assegno opacità al 25% */ 
.opac3 {opacity: 0.25;}
</style>

</head>

<body>
<div class="bgimg" align="center">
<img class="opac1" src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/06/lulu.png" alt="" />
<img class="opac2" src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/06/lulu.png" alt="" />
<img class="opac3" src="http://www.lucedigitale.com/blog/wp-content/uploads/2013/06/lulu.png" alt="" />
</div>
</body>

</html>

Il risultato del codice rappresentato è il seguente:



Analizzando per esteso i parametri della funzione: {opacity: valore opacità;}
valore opacità -> 1 -> Completamente opaco al 100%, solido
valore opacità -> 0.5 -> Trasparente al 50%, I DECIMALI VANNO ESPRESSI CON IL PUNTO (.) NON CON LA VIRGOLA!
valore opacità -> 0 -> Trasparente al 100% ed invisibile

La funziona opacity ci permette di controllare un intero oggetto strutturato come un div con tutti gli elementi al suo interno, vediamo ad esempio il codice:

<!DOCTYPE html>
<html>

<head>
<title>Titolo del documento</title>

<style type="text/css">
/* assegno immagine di sottofondo rgb */ 
.bgimg {
  background-image: url(http://www.lucedigitale.com/blog/wp-content/uploads/2013/06/pattern_diagonali.png);
}
/* assegno opacità al 100% */ 
.opac1 {opacity: 1;}
/* assegno opacità al 50% */ 
.opac2 {opacity: 0.5;}
/* assegno opacità al 25% */ 
.opac3 {opacity: 0.25;}
</style>

</head>

<body>
<div class="bgimg" align="center">
<div class="opac1">
<form action="invia.php">
  <label for="email">Email</label>
  <input type="email" name="email">
  <br>
  <input type="submit" value="Invia">
</form>
</div>
<div class="opac2">
<form action="invia.php">
  <label for="email">Email</label>
  <input type="email" name="email">
  <br>
  <input type="submit" value="Invia">
</form>
</div>
<div class="opac3">
<form action="invia.php">
  <label for="email">Email</label>
  <input type="email" name="email">
  <br>
  <input type="submit" value="Invia">
</form>
</div>
</div>
</body>

</html>

Il risultato qui sotto:













Il mio sito ufficiale>