• Blog
  • Bantuan
  • Profil
  • Kontak
serbaSerbi6.blogspot.com
  • Daftar-isi
  • FILM
  • DESIGN
  • Komputer
Home CSS Design HTML Ini Dia Cara Membuat Background-Color Transparan Dengan CSS

Ini Dia Cara Membuat Background-Color Transparan Dengan CSS

serbaserbi6 7:58:00 AM CSS, Design, HTML

Cara membuat background transparan dengan css

Kali ini saya akan berbagi sedikit ilmu tentang cara membuat background transparan dan gambar transparan denan css.bagi kamu yang pengen tau cara membuatnya, silahkan simak artikel brikut ini.

Ini Dia Cara Membuat Background-Color transparant dengan css

Membuat Background transparan.
Pertama untuk membuat background tranparan anda harus memahami tentang penggunaan kode rgba () di css, karena hanya dengan memahami penggunaan kode rgba(), anda akan lebih gampang memahami cara pembuatan background transparant.
Unutk contoh kali ini saya membuat sebuah sebuah kode html yang memiliki Class dengan nama “ Transparant ” seperti kode di bawah ini.


<div class="transparent">
 <h1># Background transparant</h1>
</div>


Setelah itu saya menambahkan style untuk kode di atas, berikut adalah script kodenya.



body{
 background:url(url.jpg);
}
.transparent{
 background:rgba(2, 2, 2, 0.5);
 width: 50%;
 height:350px;
 padding:10px;
 margin:0px auto;
 color:#fff;
}




untuk gambran contoh hasilnya bisa anda lihat seperti gambardi atas.
Keteranan :
Kode rgba(2,2,2,0.5) di atas artinya memberi warna background dengan warna hitam dan memiliki opacity/ ketebalan 0.5 sehinggan membuat background yang sebenarnya berwarna hitam gelapmenjadi lebih tipis / transparant.unutuk mengatur tranaparant / ketebalan warna anda hanya perlu merubah kode ‘0,5’ (seperti contoh di atas) menjadi “0,1”,”0,2”,”0,3”,”0,4”,”0,5”,”0,6”,”0,7”,”0,8”,”0,9”.semakin besar nilai opacity yang anda berikan maka ketebalan warna menjadi lebih tebal, dan begitu juga sebaliknya.

sekian tutorial tentang cara membuat background transparan dengan css,background-color transparan dengan css,semoga apa yang kita plajari hari ini dapat bermanfaat kedepannya,dan sayan mohon maaf apabila ada penyampaian saya yang kurang jelas,unutk bertanya silahkan berkomentar di bawah ini.
trimakasih...

Share This:

Facebook Twitter Google+ Pinterest Linkedin
HTML
  • Previous
  • Next

Artikel Terkait

No comments:

Subscribe to: Post Comments ( Atom )

Berlangganan

Yang Lagi Seru

Download & Nonton Film London Love Story bluray indonesia

Popular Posts

  • Download & Nonton Film Modus (2016) Full Movie Bluray

Label

  • adventure (1)
  • animation (1)
  • Comedy (4)
  • CSS (5)
  • Design (5)
  • Drama (6)
  • fantasy (1)
  • Film (9)
  • Horor (1)
  • HTML (5)
  • Internet (1)
  • jQuery (1)
  • Komputer (2)
  • Romance (2)
  • Serial (1)
  • thriller (1)
  • Tips (2)
  • Tutorial (4)
C 2016-2017 Template by Template @G3d3_sug@ndi