Background Transparan [CSS Code]

1:27:00 PM

Anda akan melihat Kotak transparan yang berisi tulisan dan latar-nya image

Berikut ini adalah source code-nya silahkan diutak-atik sendiri sesuai dgn keinginan (tulisan yg dibold keterangan jangan ditulis)

<html><head>
<style type="text/css">
img.transparan
{
filter:alpha(opacity=60);
opacity:0.6;
}
div.latar
{
width dan height ukuran image latar belakangnya (disesuaikan dgn image-nya)
width: 900px;
height: 195px;
background ini adalah image latar belakangnya
background: url(http://images.sikathabis.multiply.com/image/62/photos/12/1200x1200/13.jpg/Picture8.jpg?et=USTyla8Eiig8cmrJM4MTuA&nmid=1555854);
border: 2px solid black;
}
div.kotak
{
ukuran lebar dan tinggi kotak yg berisi tulisan
width: 380px;
height: 30px;
margin: 30px 70px;
background-color: #ffffff;
border: 1px light black;
ini adalah pengaturan transparan utk kotak yg berisi tulisan
filter:alpha(opacity=60);
opacity:0.6;
}
div.kotak p
{
margin: 30px 60px;
font-weight: bold;
color: #000000;
}
</head>
<body>
<center>
<div class="latar">
<br><br>
<div class="kotak">
<p>
<a href="http://kuic.multiply.com" target="_blank" title="Komplek Dosen UI Ciputat">Komplek Dosen UI Ciputat</a></p>
</div>
</div>
</body>
</html>

Referensi: PCPlus 322 Hal 27 "Efek Transparan dengan CSS"

Background Transparan [CSS Code]

7 komentar:

Recent Comments

Arsip Blog