Pelajari Tentang CSS3 Opacity

Membuat Backgrounds Anda Transparan

Salah satu hal yang dapat Anda lakukan dengan mudah dalam desain cetak tetapi tidak di Web adalah teks overlay pada gambar atau latar belakang berwarna, dan mengubah transparansi gambar tersebut sehingga teks memudar menjadi latar belakang. Tapi ada properti di CSS3 yang akan memungkinkan Anda mengubah opasitas elemen Anda sehingga memudar masuk dan keluar: opacity.

Cara Menggunakan Properti Opacity

Properti opasitas mengambil nilai jumlah transparansi dari 0,0 hingga 1,0.

0,0 adalah 100% transparan — apa pun di bawah elemen itu akan ditampilkan sepenuhnya. 1.0 adalah 100% buram — tidak ada apa pun di bawah elemen yang akan ditampilkan.

Jadi untuk mengatur elemen hingga 50% transparan, Anda akan menulis:

opacity: 0,5;

Lihat beberapa contoh opasitas dalam aksi

Pastikan untuk Menguji di Peramban Lama

Baik IE 6 maupun 7 mendukung properti opacity CSS3. Tapi kamu tidak beruntung. Sebaliknya, IE mendukung filter alfa properti hanya-Microsoft. Filter Alpha di IE menerima nilai dari 0 (benar-benar transparan) hingga 100 (benar-benar buram). Jadi, untuk mendapatkan transparansi Anda di IE, Anda harus mengalikan opacity Anda dengan 100 dan menambahkan filter alfa ke gaya Anda:

filter: alpha (opacity = 50);

Lihat filter alfa dalam aksi (hanya untuk IE)

Dan Gunakan Awalan Browser

Anda harus menggunakan awalan -moz- dan -webkit sehingga versi Mozilla dan browser Webkit yang lebih tua mendukungnya juga:

-webkit-opacity: 0,5;
-moz-opacity: 0,5;
opacity: 0,5;

Selalu letakkan awalan browser terlebih dahulu, dan properti CSS3 yang valid bertahan.

Uji awalan browser di browser Mozilla dan Webkit yang lebih lama.

Anda Dapat Membuat Gambar Transparan Juga

Atur opacity pada gambar itu sendiri dan itu akan memudar ke latar belakang. Ini sangat berguna untuk gambar latar belakang .

Dan jika Anda menambahkan tag anchor, Anda dapat membuat efek hover hanya dengan mengubah opasitas gambar.

a: hover img {
filter: alfa (opasitas = 50)
filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 50)
-moz-opacity: 0,5;
-webkit-opacity: 0,5;
opacity: 0,5;
}

Memengaruhi HTML ini:

Uji gaya dan aksi HTML di atas.

Letakkan Teks di Gambar Anda

Dengan opasitas, Anda dapat menempatkan teks di atas gambar dan membuat gambar tampak memudar di mana teks itu berada.

Teknik ini sedikit rumit, karena Anda tidak bisa hanya memudarkan gambar, karena itu akan memudar seluruh gambar. Dan Anda tidak bisa memudarkan kotak teks , karena teks akan memudar di sana juga.

1. Pertama Anda membuat DIV kontainer dan menempatkan gambar Anda di dalam:

   
   

2. Ikuti gambar dengan DIV kosong — ini yang akan Anda buat transparan.

   
   
   

3. Hal terakhir yang Anda tambahkan dalam HTML Anda adalah DIV dengan teks Anda di dalamnya:

   
   
   
   Ini anjing saya Shasta. Bukankah dia imut!

4. Anda gaya dengan posisi CSS, untuk menempatkan teks di atas gambar. Saya menempatkan teks saya di sisi kiri, tetapi Anda bisa meletakkannya di sebelah kanan dengan mengubah dua kiri: 0; properti ke kanan: 0; .

   #image {
   posisi: relatif;
   lebar: 170px;
   tinggi: 128px;
   margin: 0;
   }
   #text {
   posisi: absolut;
   atas: 0;
   kiri: 0;
   lebar: 60px;
   tinggi: 118px;
   latar belakang: #fff;
   padding: 5px;
   }
   #text {
   filter: alfa (opacity = 70);
   filter: progid: DXImageTransform.Microsoft.Alpha (opacity = 70);
   -moz-opacity: 0,70;
   opacity: 0,7;
   }
   #words {
   posisi: absolut;
   atas: 0;
   kiri: 0;
   lebar: 60px;
   tinggi: 118px;
   latar belakang: transparan;
   padding: 5px;
   }

Lihat bagaimana tampilannya