• 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 0 Comments 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

  • Cara Gampang Membuat Kotak Pencarian/Search Box Responsive Dengan CSS & HTML
  • Cara Membuat Menu Dropdown Sederhana Dengan CSS
  • Cara Membuat Tampilan Background Gambar Lebih Responsive
  • Ini Dia Cara Membuat Background-Color Transparan Dengan CSS
  • Cara Mudah Membuta Menu Navigasi Responsive (mobile friendly) Dengan HTML,CSS,Dan jQuery
Subscribe to: Post Comments ( Atom )

Berlangganan

Yang Lagi Seru

  • Download & Nonton Film Modus (2016) Full Movie BlurayDownload & Nonton Film Modus (2016) Full Movie Bluray
    06 Januari 2017
  • Download & Nonton Film London Love Story bluray indonesiaDownload & Nonton Film London Love Story bluray indonesia
    17 Maret 2017
  • Download & Nonton Film Security Ugal-UgalanDownload & Nonton Film Security Ugal-Ugalan
    17 Maret 2017
  • Download & Nonton Film me vs mami indonesiaDownload & Nonton Film me vs mami indonesia
    05 Maret 2017
  • Download & Nonton Film Moana bluray subtitle indonesia 2016Download & Nonton Film Moana bluray subtitle indonesia 2016
    05 Maret 2017
  • Download Film The Walking Dead Season 5 Episode 1 - No Sanctuary Subtitle IndonesiaDownload Film The Walking Dead Season 5 Episode 1 - No Sanctuary Subtitle Indonesia
    05 Januari 2017

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