Membuat gambar transparan dengan CSS.
Properti CSS opacity adalah bagian dari rekomendasi CSS3.
Contoh 1 - Membuat Gambar Transparan
CSS3 properti untuk transparansi opacity.
Pertama kita akan menunjukkan cara untuk membuat gambar transparan dengan CSS.
IE9, Firefox, Chrome, Opera, dan Safari menggunakan opacity properti untuk transparansi. Properti opacity dapat mengambil nilai 0,0-1,0. Sebuah nilai yang lebih rendah membuat elemen lebih transparan.
img {
opacity: 0.5;
filter: alpha(opacity=50); /* untuk IE8 dan versi sebelumnya*/
}
IE8 dan sebelumnya menggunakan filter: alpha (opacity = x). X dapat mengambil nilai dari 0 - 100. Sebuah nilai yang lebih rendah membuat elemen lebih transparan.
img.amik {
opacity: 0.5;
filter: alpha(opacity=50); /* untuk IE8 dan versi sebelumnya*/}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100); /* untuk IE8 dan versi sebelumnya*/}
}
Blok CSS pertama adalah mirip dengan kode dalam Contoh 1. Selain itu, kami telah menambahkan apa yang harus terjadi ketika pengguna berada di atas salah satu gambar. Dalam hal ini kita ingin gambar untuk tidak transparan ketika pengguna melayang di atasnya.
CSS untuk ini adalah: opacity = 1.
IE8 dan sebelumnya: filter: alpha (opacity = 100).
Ketika pointer mouse bergerak menjauh dari gambar, gambar akan transparan lagi.
<html>
<head>
<style>
div.background {
background:url(amik.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>
Pertama, kita membuat elemen <div> (class = "background") dengan gambar latar belakang, dan perbatasan.Kemudian kita buat lagi <div> (class = "transbox") dalam pertama <div>. <Div class = "transbox"> memiliki warna latar belakang, dan perbatasan - div transparan. Di dalam transparan <div>, kita menambahkan beberapa teks di dalam <p> elemen
0 komentar:
Posting Komentar