Memilih Background Transparant Yang Tepat Pada CSS

Memilih Background Transparant Yang Tepat Pada CSS - Sebenarnya pembuatan background transparant ini harus disesuaikan dengan keperluan agar penggunaannya tepat sesuai dengan keinginan kita.

Kode yang lazim digunakan untuk membuat background menjadi transparant yaitu dengan kode opacity. Namun ketika kita menggunakan opacity pada div yang di dalamnya terdapat konten lain maka bukan hanya background-nya yang yang menjadi transparant, namun konten lainnya di dalam div akan ikut transparant juga.

Nah agar kita bisa membuat background transparat tanpa mempengaruhi konten lain di dalamnya, maka kita membuat background dengan RGBa artinya kita membuat background dengan kode RGB dan langsung memberikan nilai transparansi pada alpha.

Sebagai contoh, di bawah ini adalah kotak dengan menggunakan opacity dengan kode CSS seperti berikut:

.kotak1{

    background:#fff;

    color:#000;

    padding:10px;

    margin:0 auto;

    opacity:.7;

    font-weight:700;

}

Selain backgound putih menjadi transparant, tulisan di dalamya pun ikut transparant.

Dan di bawah ini adalah kotak yang menggunakan background transparant dengan RGBa (Red Green Blue alpha) dengan CSS seperti berikut:

Bisa Anda lihat bahwa hanya background putih saja yang transparant, sementara tulisannya tidak ikut transparant.

Pada CSS di atas backgroundnya menggunakan RGBa seperti berikut rgba(255,255,255,.7) yang artinya Red=255 Green=255 Blue=255 adalah kode RGB untuk warna putih dan .7 adalah nilai alpha dengan transparansi 70%. Jika nilai .7 diganti dengan 1 maka backgroundnya tidak transparant dan jika diganti dengan 0 maka tidak ada background yang terlihat.