Cara Membuat Text Dalam Kotak Transparan
Pertama, kita membuat elemen div (class = "background") dengan menetapkan tinggi dan lebar gambar latar belakang, dan perbatasan (border). Lalu kita membuat sebuah div yang lebih kecil (class = "transbox") di dalam elemen div pertama. Div transbox memiliki lebar tetap, warna latar belakang, dan perbatasan - dan itu adalah transparan. Di dalam div transparan, kita tambahkan beberapa teks di dalam elemen ap.
Berikut ini kode keseluruhan:
div.background
{
width:500px;
height:250px;
position:relative;
left: 47px;
background:url(taruh url gambar kamu di sini) repeat;
border:2px solid black;
}
div.transbox
{
width:400px;
height:180px;
margin:30px 50px;
background-color:#ffffff;
border:1px solid black;
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin:30px 40px;
font-weight:bold;
color:#000000;
}
Taruh text di sini
Langkah terakhir tinggal kamu taruh kode-kode diatas pada halaman HTML posting kamu. Yap sampai disini tutorial "Cara Membuat Text Dalam Kotak Transparan" semoga bermanfaat.
|
