Dengan pengaturan transparansi atau opacity antara dua layer maka kita akan menentukan sampai seberapa kedua layer tersebut bergabung. Dalam CSS3 kita menentukan tingkat transparansi dengan property opacity.
Makin rendah opacity maka layer yang di belakang akan lebih kuat, makin tinggi opacity maka layer bagian depan akan makin kuat. Pada saat opacity:0 maka layer belakang akan ditampilkan penuh, pada opacity:1 layer depan ditampilkan penuh. Untuk nilai opacity antara 0 dan satu maka akan dihasilkan perpaduan dari dua layer tersebut.
Sebagai contoh kita akan menggabungkan
- Foto pantai
- Tulisan ‘PANTAI KUKUP’
Coding secara lengkap adalah:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html>
<head>
<title>Opacity</title>
<style type=”text/css”>
#kotak
{
background-image: url(‘kukup.jpg’);
width: 500px;
height: 333px;
}
#judul
{
padding-left: 20px;
padding-top: 30px;
font-family: Arial;
font-size: 125px;
font-weight: bold;
text-shadow: 3px 3px 2px #d6d6d6;
color:white;
opacity: 0.4;
}
</style>
</head>
<body>
<div id=”kotak”>
<div id=”judul”>
PANTAI KUKUP
</div>
</div>
</body>
</html>
Demo dari coding di atas dapat dilihat di http://aris.proweb.asia/opacity.html dengan tampilan seperti gambar di bawah ini:
Kunjungi www.proweb.co.id untuk menambah wawasan anda.