InternetWeb Design

Css harta "ketelusan" - cara yang mudah untuk membuat laman web yang lebih reka bentuk yang menarik

Hari ini, penciptaan reka bentuk laman web menjadi satu bentuk seni. Ini bukan sahaja satu set elemen halaman warna tertentu dan saiz, fon gaya yang berbeza dan lukisan bertema. Dalam usaha untuk membuat laman web anda berbeza daripada orang lain, untuk menarik perhatian pelawat dan mengarahkannya kepada unsur-unsur tertentu, digunakan sebilangan besar kaedah dan alat. Di antara mereka ada yang terletak css sangat popular - ketelusan. Teknik ini agak bergaya dan glamor, dan oleh itu digunakan kerap. Ketelusan boleh memberi objek yang berbeza muka surat laman web ini - blok teks atau keseluruhan gambar, sebagai contoh. Ia juga dicapai dalam cara yang berbeza. Marilah kita memeriksa mereka di bawah.

Parameter menentukan unsur-unsur ketelusan

Parameter untuk mengawal ketelusan unsur-unsur beberapa. Mereka digunakan bergantung kepada objektif khusus, serta pelayar, yang berada di bawah "diselaraskan" reka bentuk. Ini termasuk sifat-sifat berikut:

  • kelegapan;
  • menapis;
  • PNG-imej sebagai latar belakang.

nilai hartanah css "ketelusan" diubah seperti berikut: semakin tinggi jumlah, tahap yang lebih rendah daripada ketelusan unsur. kelegapan, ia berbeza dari 0 dan 1 di dalam penapis - dari 10 hingga 100. Dan yang kedua digunakan untuk pelayar Interet Explorer, dan semua lain-lain hartanah kelegapan berkenaan.

Ketelusan imej (berubah-ubah)

Mari kita mulakan dengan pilihan yang akan muncul telus apabila anda mengalihkan item dengan menyeret tetikus.

Mari kita kaji bagaimana untuk menentukan ketelusan imej. CSS menawarkan dua pilihan. Untuk melakukan ini, anda perlu mendaftar secara langsung dalam kod html-dokumen seperti berikut:

    1. Nyatakan laluan kepada imej.
    2. Kita menentukan parameter ketelusan apabila kursor tidak. Untuk melakukan ini, kita menggunakan sifat-sifat onmouseover dan onmouseout, yang menetapkan nilai kelegapan, dan penapis.

    Ciri-ciri yang sama boleh ditetapkan dalam css-dokumen dan kod sumber untuk menambah rujukan kepada ia. Keputusan berubah yang sama.

    Ketelusan blok teks dan halaman

    Bagi teks atau blok (div telus), css menawarkan pilihannya, serupa dengan mewujudkan imej telus, anda perlu menggunakan disambungkan css-fail, di mana parameter yang dikehendaki ditetapkan. Anda boleh pergi dan cara yang lebih mudah. Apabila anda menetapkan gaya div gaya blok atau teks p menetapkan html-kod berikut untuk onmouseover dan onmouseout unsur-unsur. Kedua-dua pilihan bekerja dan menghasilkan keputusan yang dikehendaki.

    ketelusan berterusan

    Dalam beberapa kes, ketelusan objek, elemen reka bentuk atau teks yang anda mahu untuk menetapkan secara berterusan. Dalam keadaan ini, penyelesaian adalah lebih mudah daripada apabila anda membawa kursor tetikus.

    unsur css untuk ketelusan akan diberikan oleh kod berikut. Dalam blok gaya div menetapkan nilai untuk latar belakang (cth, # ff8800), kelegapan (contohnya, 0.5) dan lebar (lebar) dan padding (padding).

    Untuk imej nilai kod membuat dan penapis kelegapan, dan nyatakan laluan kepada imej.

    RGBA-kaedah

    Terdapat pilihan lain untuk menggunakan css hartanah ini: ketelusan boleh digunakan untuk warna asas mana-mana elemen reka bentuk. Ia menggunakan kaedah RGBA. Tiga huruf pertama berdiri untuk warna asas (merah, pembelahan, biru), dan yang terakhir - alpha, yang menetapkan tahap ketelusan. Menggunakan RGBA-format menetapkan ketelusan, menunjuk ke angka yang lepas. Sebagai contoh, seperti: latar belakang: RGBA (240,2,33,0.4035).

    kesimpulan

    Oleh itu, dengan menggunakan dalam perjalanan kerja pada reka bentuk laman ciri mudah tetapi berkesan css "ketelusan", anda boleh membuat unsur-unsur dengan usaha yang minimum lebih menarik dan lebih ketara. Penjelmaan diterangkan adalah ciri-ciri ketelusan adat akan membantu anda dengan ini.

    Similar articles

     

     

     

     

    Trending Now

     

     

     

     

    Newest

    Copyright © 2018 ms.unansea.com. Theme powered by WordPress.