CSS - używanie obrazów

Obrazy odgrywają ważną rolę na każdej stronie internetowej. Chociaż nie jest zalecane dołączanie wielu obrazów, nadal ważne jest, aby używać dobrych obrazów tam, gdzie jest to wymagane.

CSS odgrywa dobrą rolę w kontrolowaniu wyświetlania obrazu. Za pomocą CSS można ustawić następujące właściwości obrazu.

Plik border Właściwość służy do ustawiania szerokości obramowania obrazu.
Plik height Właściwość służy do ustawiania wysokości obrazu.
Plik width Właściwość służy do ustawiania szerokości obrazu.
Plik -moz-opacity właściwość służy do ustawiania krycia obrazu.

Właściwość obramowania obrazu

Właściwość border obrazu służy do ustawiania szerokości obramowania obrazu. Ta właściwość może mieć wartość długości lub w%.

Szerokość zero pikseli oznacza brak obramowania.

Oto przykład -

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

To da następujący wynik -

Właściwość Wysokość obrazu

Właściwość height obrazu służy do ustawiania wysokości obrazu. Ta właściwość może mieć wartość w długości lub w%. Podając wartość w%, stosuje ją w odniesieniu do pudełka, w którym znajduje się obraz.

Oto przykład -

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

To da następujący wynik -

Właściwość Szerokość obrazu

Właściwość width obrazu służy do ustawiania szerokości obrazu. Ta właściwość może mieć wartość w długości lub w%. Podając wartość w%, stosuje ją w odniesieniu do pudełka, w którym znajduje się obraz.

Oto przykład -

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

To da następujący wynik -

Właściwość -moz-opacity

Właściwość -moz-opacity obrazu służy do ustawiania krycia obrazu. Ta właściwość służy do tworzenia przezroczystego obrazu w Mozilli. IE używafilter:alpha(opacity=x) do tworzenia przezroczystych obrazów.

W Mozilli (-moz-opacity: x) x może mieć wartość z przedziału 0,0 - 1,0. Niższa wartość sprawia, że element jest bardziej przezroczysty (to samo dotyczy krycia składni zgodnej z CSS3: x).

W IE (filter: alpha (opacity = x)) x może być wartością z zakresu 0 - 100. Niższa wartość sprawia, że element jest bardziej przezroczysty.

Oto przykład -

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

To da następujący wynik -