Membuat gambar transparan dengan CSS mudah.
CSS opacity properti merupakan bagian dari rekomendasi CSS3.
Contoh 1 - Membuat Gambar Transparan
Properti CSS3 untuk transparansi adalah opacity .
Pertama kita akan menunjukkan cara untuk membuat gambar transparan dengan CSS.
gambar biasa:
Gambar yang sama dengan transparansi:
Lihatlah CSS berikut:
The opacity properti dapat mengambil nilai 0,0-1,0. Nilai yang lebih rendah, lebih transparan.
IE8 dan sebelumnya menggunakan filter:alpha(opacity=x) . x dapat mengambil nilai dari 0 - 100. Sebuah nilai yang lebih rendah membuat elemen lebih transparan.
Contoh 2 - Gambar Transparansi - Arahkan Effect
Mouse gambar:
CSS terlihat seperti ini:
Contoh
img
{
opacity: 0.4;
filter: alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity: 1.0;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
Cobalah sendiri " Blok CSS pertama adalah mirip dengan kode dalam Contoh 1. Selain itu, kami telah menambahkan apa yang harus terjadi ketika pengguna melayang di atas salah satu gambar. Dalam hal ini kita ingin gambar untuk TIDAK menjadi transparan ketika pengguna melayang di atasnya. CSS untuk ini adalah opacity:1; .
Ketika pointer mouse bergerak menjauh dari gambar, gambar akan transparan lagi.
Contoh 3 - Text di Box Transparan
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Kode sumber terlihat seperti ini:
Contoh
<html>
<head>
<style>
div.background
{
background: url(/css/klematis.jpg) repeat;
border: 2px solid black;
}
div.transbox
{
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
margin: 5%;
font-weight: bold;
color: #000000;
}
</style>
</head>
<body>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</body>
</html>
Cobalah sendiri " Pertama, kita membuat <div> elemen (class="background") dengan gambar latar belakang, dan perbatasan. Kemudian kita buat lagi <div> (class="transbox") dalam pertama <div> . The <div class="transbox"> memiliki warna latar belakang, dan perbatasan - div transparan. Di dalam transparan <div> , kita menambahkan beberapa teks di dalam <p> elemen.