Memilih Background Transparant Yang Tepat Pada CSS

Memilih Background Transparant Yang Tepat Pada CSS

Bola Hero Gawai

Memilih Background Transparant Yang Tepat Pada CSS

Memilih Background Transparant
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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×