Cara menggunakan background image opacity css

Pada kesempatan kali ini saya akan menjelaskan cara membuat efek transparant di css. Seperti yang teman-teman sudah ketahui, ketika teman-teman ingin membuat tampilan warna sebuah kotak element di css dapat menggunakan property background atau background-color yang di ikuti dengan kode warna sebagai value atau nilai dari property tersebut. Lantas bagaimana jika teman-teman ingin membuat tampilan kotak tersebut menjadi berwarna dan transparant atau tembus pandang ?

Jawaban nya adalah BISA, dan teman-teman tidak perlu khawatir, karena di CSS, ada dua opsi atau dua cara untuk membuat nya menjadi transparant, teman-teman bisa memanfaatkan property opacity atau property background RGBA untuk membuat sebuah kotak element tersebut terlihat menjadi transparant atau tembus pandang. Dan pada contoh di sini saya akan jabarkan satu persatu.

Berikut contoh nya :

• Menggunakan Property Opacity

Cara ini sebenarnya lebih cocok jika teman-teman buat untuk bidang gambar di bandingkan teks, meskipun pada kondisi tertentu tidak menutup kemungkinan untuk bisa teman-teman gunakan dengan teks, berikut kode nya :

1

2

3

4

5

6

7

8

9

10

11

.kotak-opacity

{

color:#FFF;

font-size:14px;

font-weight:bold;

padding:20px;

margin:30px;

width:40%;

background:#f00;

opacity:0.4;

}

Nilai opacity tersebut yang dapat menentukan tingkat tebal atau tipis nya tampilan transparan yang teman-teman buat. nilai tersebut dapat di tentukan antara 0-1.

• Menggunakan Property Background RGBA
  

Cara ini hampir sama dengan menggunkan opacity, yang membedakan cara ini hanya membuat transparan pada sisi background nya saja dan bukan pada object yang dapat teman-teman pilih, berikut kode nya :

1

2

3

4

5

6

7

8

9

.kotak-rgba {

color:#FFF;

font-size:14px;

font-weight:bold;

padding:20px;

margin:30px;

width:40%;

background:rgba(249,222,12,0.1); /* background:rgba(red,green,blue,Aplha); */

}

Dalam penulisan kode tersebut hampir sama dalam membuat background pada umum nya, hanya saja di dalamnya terdapat struktur pewarnaan RGBA (Red,Green,Blue,Alpha). Untuk value atau nilai tersebut menggunakan bilangan desimal antara 0 s/d 255, berbeda dengan sebelum nya yang menggunakan hexa desimal 00 s/d FF. Sedangkan nilai Alpha tersebut yang dapat menentukan tingkatan besar atau kecilnya background transparan yang teman-teman buat & penulisan nya pun sama seperti menggunakan opacity.

Halo sobat digital, pada tutorial kali ini saya akan berbagi sedikit tips untuk kalina yang baru belajar dunia Website khususnya di User Interface.

Topik yang akan kita bahas kali ini adalah gimana sih cara membuat Background color Transparan dengan css?

Background transparant adalah sebuah gambar atau warna yang memiliki tingkat opacity (Ketebalan) yang kecil sehingga objek yang berada dibelakangnya akan terlihat.

Biasanya teknik background transparant ini digunakan untuk mempercantik tampilan sebuah website agar website tersebut lebih menarik dan tentunya membuat tampilan website lebih hidup.

Kalau sudah jelas, yuk tanpa panjang lebar lagi, mari kita simak caranya dibawah ini gengss :)

Cara Membuat Background Color Transparan Dengan CSS

Pertama tama buatlah file projek/latihan baru yan berisikan komponen html.

Pada file HTML tersebut, buatlah sebuah baris kode seperti berikut ini :

See the Pen vYKgGVZ by gedesugandi (@gedesugandi) on CodePen.

Penjelasan kode CSS diatas:

Body , pada tag body, saya memberikan background gambar, yang mana itu digunakan untuk sebagai contoh objek yang akan berada dibelakang kotak nantinya.

.transparent, pada class tersebut berisikan beberapa baris css yang digunakan untuk membuat kotak dan membentuk background tranparant.

Inti dari kode diatas supaya background menjadi transparant adalah perintah ini background-color:rgba(0, 0, 0, 0.5);

Kenapa warnanya abu-abu transparant? itu karena kode warna RGB(Red, Green, Blue) pada contoh diatas adalah 0,0,0 yang mana itu adalah kode warna hitam dan di paling belakang karena kita memberikan opacity 0.5 maka warna hitam tersebut berubah menjadi tranparant keabu abuan. Semakin besar nilai opacity yang diberi maka semakin tebal pula warna hitamnya begitu juga sebaliknya, jika semakin kecil maka semakin transparant juga waranya.

Gimana? Gampang kan?

Sekian tutorial Cara Membuat Background Color Transparan Dengan CSS, semoga ilmunya bermanfaat untuk kita semua :)

apabila ada pertanyaan dan ada yang kurang jelas bisa kalian tanyakan di kolom komentar dibawah ini

Tag :

Bedahdigital Seorang blogger pemula yang berusaha berbagi tips dan trik seputaran dunia digital serta info menarik lainnya

Opacity CSS untuk apa?

Apa itu background pada CSS?

Apa itu background