CSS Gambar Opacity / Transparency
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Membuat gambar transparan dengan CSS mudah.
Properti CSS opacity adalah bagian dari rekomendasi W3C CSS3.
Contoh 1 - Membuat Gambar Transparan
CSS3 properti untuk transparansi opacity.
Pertama kita akan menunjukkan cara untuk membuat gambar transparan dengan CSS.
Gambar biasa:
Klematis
Gambar yang sama dengan transparansi:
Klematis
Lihatlah CSS berikut:
contoh
img {
opacity: 0.4;
filter: alpha (opacity = 40); / * Untuk IE8 dan sebelumnya * /
}
Cobalah sendiri »
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.
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 - Hover Efek
Mouse di atas gambar:
Klematis Klematis
CSS terlihat seperti ini:
contoh
img {
opacity: 0.4;
filter: alpha (opacity = 40); / * Untuk IE8 dan sebelumnya * /
}
img: hover {
opacity: 1.0;
filter: alpha (opacity = 100); / * Untuk IE8 dan sebelumnya * /
}
Cobalah sendiri »
Blok CSS pertama adalah mirip dengan kode dalam Contoh 1. Selain itu, kami telah menambahkan apa yang harus terjadi ketika hover pengguna atas salah satu gambar. Dalam hal ini kita ingin gambar untuk tidak transparan ketika hover pengguna 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.
Contoh 3 - Text dalam Kotak Transparan
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Kode sumber terlihat seperti ini:
contoh
<html>
<head>
<style>
div.background {
width: 500px;
height: 250px;
background: url (klematis.jpg) repeat;
border: 2px padat hitam;
}
div.transbox {
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid hitam;
opacity: 0.6;
filter: alpha (opacity = 60); / * Untuk IE8 dan sebelumnya * /
}
div.transbox p {
margin: 30px 40px;
font-weight: bold;
color: # 000000;
}
</ style>
</ head>
<body>
<div class = "background">
<div class = "transbox">
<p> Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. </ P>
</ div>
</ div>
</ body>
</ html>
Cobalah sendiri »
Pertama, kita membuat elemen div (class = "background") dengan tinggi tetap dan lebar, gambar latar belakang, dan perbatasan. Kemudian kita membuat div kecil (class = "transbox") di dalam elemen div pertama. The "transbox" div memiliki lebar tetap, warna latar belakang, dan perbatasan - dan itu adalah transparan. Di dalam div transparan, kita tambahkan beberapa teks di dalam elemen ap.
«Sebelumnya
Tonton video tutorial ini
Next Chapter »
Membuat gambar transparan dengan CSS mudah.
Properti CSS opacity adalah bagian dari rekomendasi W3C CSS3.
Contoh 1 - Membuat Gambar Transparan
CSS3 properti untuk transparansi opacity.
Pertama kita akan menunjukkan cara untuk membuat gambar transparan dengan CSS.
Gambar biasa:
Klematis
Gambar yang sama dengan transparansi:
Klematis
Lihatlah CSS berikut:
contoh
img {
opacity: 0.4;
filter: alpha (opacity = 40); / * Untuk IE8 dan sebelumnya * /
}
Cobalah sendiri »
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.
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 - Hover Efek
Mouse di atas gambar:
Klematis Klematis
CSS terlihat seperti ini:
contoh
img {
opacity: 0.4;
filter: alpha (opacity = 40); / * Untuk IE8 dan sebelumnya * /
}
img: hover {
opacity: 1.0;
filter: alpha (opacity = 100); / * Untuk IE8 dan sebelumnya * /
}
Cobalah sendiri »
Blok CSS pertama adalah mirip dengan kode dalam Contoh 1. Selain itu, kami telah menambahkan apa yang harus terjadi ketika hover pengguna atas salah satu gambar. Dalam hal ini kita ingin gambar untuk tidak transparan ketika hover pengguna 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.
Contoh 3 - Text dalam Kotak Transparan
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Kode sumber terlihat seperti ini:
contoh
<html>
<head>
<style>
div.background {
width: 500px;
height: 250px;
background: url (klematis.jpg) repeat;
border: 2px padat hitam;
}
div.transbox {
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid hitam;
opacity: 0.6;
filter: alpha (opacity = 60); / * Untuk IE8 dan sebelumnya * /
}
div.transbox p {
margin: 30px 40px;
font-weight: bold;
color: # 000000;
}
</ style>
</ head>
<body>
<div class = "background">
<div class = "transbox">
<p> Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan.
Ini adalah beberapa teks yang ditempatkan dalam kotak transparan. </ P>
</ div>
</ div>
</ body>
</ html>
Cobalah sendiri »
Pertama, kita membuat elemen div (class = "background") dengan tinggi tetap dan lebar, gambar latar belakang, dan perbatasan. Kemudian kita membuat div kecil (class = "transbox") di dalam elemen div pertama. The "transbox" div memiliki lebar tetap, warna latar belakang, dan perbatasan - dan itu adalah transparan. Di dalam div transparan, kita tambahkan beberapa teks di dalam elemen ap.
Tidak ada komentar:
Posting Komentar