Tutorial Belajar CSS Bagian 8 : Cara Menggunakan Properti Image di CSS

Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 7 : Cara Menggunakan Properti Text di CSS. Selanjutnya, kita akan mempelajari cara menggunakan properti image di CSS.

Gambar memiliki peran penting dalam konten website.

Meskipun tidak disarankan untuk membuat banyak gambar dalam konten web, namun gambar yang bagus adalah sebuah keharusan untuk menarik minat pengunjung.

Kode CSS sangat berguna untuk mengatur tampilan gambar. Anda dapat memperindah gambar menggunakan property CSS berikut.

Properti border digunakan untuk mengatur lebar perbatasan gambar.
Properti height digunakan untuk mengatur tinggi gambar.
Properti width digunakan untuk mengatur lebar gambar.
Properti -moz-opacity digunakan untuk mengatur opasitas gambar.

Properti Border

Properti border digunakan untuk mengatur lebar border gambar. Nilai yang digunakan dalam properti ini bisa berupa panjang atau dalam %.

Width 0 px berarti tidak ada batas.

Berikut contohnya :

<html>
   <head>
   </head>

   <body>
      <img style = "border:0px;" src = "https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png"/>
      <br />
      <img style = "border:3px dashed red;" src = "https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png"/>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti Height

Properti height digunakan untuk mengatur tinggi gambar.

Nilai yang digunakan dalam properti ini bisa dalam panjang atau dalam %.

Berikut ini contohnya :

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; height:100px;" src = "https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png" />
      <br />
      <img style = "border:1px solid red; height:50%;" src = "https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png" />
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti Width

Properti width digunakan untuk mengatur lebar gambar.

Nilai yang biasanya digunakan dalam properti ini dapat berupa panjang atau %.

Berikut ini contohnya :

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; width:150px;" src = "https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png" />
      <br />
      <img style = "border:1px solid red; width:100%;" src = "https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png"/>
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Properti -moz-opacity

Properti -moz-opacity digunakan untuk mengatur opacity dari sebuah gambar.

Properti ini digunakan untuk membuat gambar transparan di Mozilla. IE menggunakan filter: alpha (opacity = x) untuk membuat gambar transparan.

Di Mozilla (-moz-opacity: x) x dapat bernilai dari 0,0 – 1,0. Nilai yang lebih rendah membuat elemen lebih transparan (Hal yang sama berlaku untuk opasitas sintaks yang valid CSS3: x).

Di IE (filter: alpha (opacity = x)) x dapat bernilai 0 – 100. Nilai yang lebih rendah membuat elemen lebih transparan.

Berikut ini contohnya :

<html>
   <head>
   </head>

   <body>
      <img style = "border:1px solid red; -moz-opacity:0.4; filter:alpha(opacity=40);" src = "https://mbahwp.com/wp-content/uploads/2017/07/Logo-Mbah-WP.png" />
   </body>
</html>

Browser akan menampilkan hasil sebagai berikut :

Semoga tutorial ini membantu Anda untuk mempelajari cara menggunakan properti image di CSS untuk memperindah gambar di dokumen HTML.