Memilih Background Transparant Yang Sempurna Pada Css

Memilih Background Transparant Yang Tepat Pada CSS - Sebenarnya pembuatan background transparant ini harus diubahsuaikan dengan keperluan semoga penggunaannya sempurna sesuai dengan impian kita.

Kode yang lazim dipakai untuk menciptakan background menjadi transparant yaitu dengan isyarat opacity. Namun saat kita memakai 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 semoga kita sanggup menciptakan background transparat tanpa menghipnotis konten lain di dalamnya, maka kita menciptakan background dengan RGBa artinya kita menciptakan background dengan isyarat RGB dan eksklusif menunjukkan nilai transparansi pada alpha.

Sebagai contoh, di bawah ini ialah kotak dengan memakai opacity dengan isyarat CSS menyerupai 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, goresan pena di dalamya pun ikut transparant.

Dan di bawah ini ialah kotak yang memakai background transparant dengan RGBa (Red Green Blue alpha) dengan CSS menyerupai 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 memakai RGBa menyerupai berikut rgba(255,255,255,.7) yang artinya Red=255 Green=255 Blue=255 ialah isyarat RGB untuk warna putih dan .7 ialah nilai alpha dengan transparansi 70%. Jika nilai .7 diganti dengan 1 maka backgroundnya tidak transparant dan kalau diganti dengan 0 maka tidak ada background yang terlihat.

Sumber https://www.kompiajaib.com/

Share this post