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;
}
Tulisan di kotak 1 ini menjadi ikut transparant.
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:

.kotak2{
    background:rgba(255,255,255,.7);
    color:#000;
    padding:10px;
    margin:0 auto;
    font-weight:700;
}
Tulisan di kotak 2 ini tidak ikut transparant.
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.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments