CSS - Usando imagens

As imagens desempenham um papel importante em qualquer página da web. Embora não seja recomendado incluir muitas imagens, ainda é importante usar boas imagens sempre que necessário.

CSS desempenha um bom papel no controle da exibição de imagens. Você pode definir as seguintes propriedades de imagem usando CSS.

o border propriedade é usada para definir a largura de uma borda da imagem.
o height propriedade é usada para definir a altura de uma imagem.
o width propriedade é usada para definir a largura de uma imagem.
o -moz-opacity propriedade é usada para definir a opacidade de uma imagem.

A propriedade da borda da imagem

A propriedade border de uma imagem é usada para definir a largura de uma borda da imagem. Esta propriedade pode ter um valor em comprimento ou em%.

Uma largura de zero pixels significa nenhuma borda.

Aqui está o exemplo -

<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>

Isso produzirá o seguinte resultado -

A propriedade da altura da imagem

A propriedade height de uma imagem é usada para definir a altura de uma imagem. Esta propriedade pode ter um valor em comprimento ou em%. Ao dar o valor em%, aplica-o em relação à caixa em que a imagem está disponível.

Aqui está um exemplo -

<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>

Isso produzirá o seguinte resultado -

A propriedade da largura da imagem

A propriedade de largura de uma imagem é usada para definir a largura de uma imagem. Esta propriedade pode ter um valor em comprimento ou em%. Ao dar o valor em%, aplica-o em relação à caixa em que a imagem está disponível.

Aqui está um exemplo -

<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>

Isso produzirá o seguinte resultado -

A propriedade -moz-opacity

A propriedade -moz-opacity de uma imagem é usada para definir a opacidade de uma imagem. Esta propriedade é usada para criar uma imagem transparente no Mozilla. IE usafilter:alpha(opacity=x) para criar imagens transparentes.

No Mozilla (-moz-opacity: x) x pode ser um valor de 0,0 a 1,0. Um valor inferior torna o elemento mais transparente (o mesmo vale para a opacidade da sintaxe válida em CSS3: x).

No IE (filtro: alfa (opacidade = x)) x pode ser um valor de 0 a 100. Um valor menor torna o elemento mais transparente.

Aqui está um exemplo -

<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>

Isso produzirá o seguinte resultado -