Ini Dia Cara Membuat Background-Color Transparan Dengan CSS
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.
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...
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...
No comments: