CSS - Utilizzo di immagini

Le immagini giocano un ruolo importante in qualsiasi pagina web. Anche se non è consigliabile includere molte immagini, è comunque importante utilizzare buone immagini ovunque sia necessario.

I CSS giocano un buon ruolo per controllare la visualizzazione delle immagini. È possibile impostare le seguenti proprietà dell'immagine utilizzando CSS.

  • Il border viene utilizzata per impostare la larghezza di un bordo dell'immagine.

  • Il height viene utilizzata per impostare l'altezza di un'immagine.

  • Il width viene utilizzata per impostare la larghezza di un'immagine.

  • Il -moz-opacity viene utilizzata per impostare l'opacità di un'immagine.

La proprietà Image Border

La proprietà border di un'immagine viene utilizzata per impostare la larghezza di un bordo dell'immagine. Questa proprietà può avere un valore in lunghezza o in%.

Una larghezza di zero pixel significa nessun bordo.

Ecco l'esempio:

<html>
   <head>
   </head>

   <body>
      <img style = "border:0px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:3px dashed red;" src = "/css/images/logo.png" />
   </body>
</html>

Produrrà il seguente risultato:

La proprietà Altezza immagine

La proprietà height di un'immagine viene utilizzata per impostare l'altezza di un'immagine. Questa proprietà può avere un valore in lunghezza o in%. Pur dando valore in%, lo applica rispetto al riquadro in cui è disponibile un'immagine.

Ecco un esempio:

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; height:100px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; height:50%;" src = "/css/images/logo.png" />
   </body>
</html>

Produrrà il seguente risultato:

La proprietà Larghezza immagine

La proprietà width di un'immagine viene utilizzata per impostare la larghezza di un'immagine. Questa proprietà può avere un valore in lunghezza o in%. Pur dando valore in%, lo applica rispetto al riquadro in cui è disponibile un'immagine.

Ecco un esempio:

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; width:150px;" src = "/css/images/logo.png" />
      <br />
      <img style = "border:1px solid red; width:100%;" src = "/css/images/logo.png" />
   </body>
</html>

Produrrà il seguente risultato:

La proprietà -moz-opacity

La proprietà -moz-opacity di un'immagine viene utilizzata per impostare l'opacità di un'immagine. Questa proprietà viene utilizzata per creare un'immagine trasparente in Mozilla. IE utilizzafilter:alpha(opacity=x) per creare immagini trasparenti.

In Mozilla (-moz-opacity: x) x può essere un valore compreso tra 0,0 e 1,0. Un valore più basso rende l'elemento più trasparente (lo stesso vale per l'opacità della sintassi valida per CSS3: x).

In IE (filter: alpha (opacity = x)) x può essere un valore compreso tra 0 e 100. Un valore più basso rende l'elemento più trasparente.

Ecco un esempio:

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "/css/images/logo.png" />
   </body>
</html>

Produrrà il seguente risultato: