Titik utama menggunakan CSS untuk melaksanakan latar belakang kecerunan termasuk: 1. Pilih fungsi gradien linear atau radial; 2. Tetapkan arah, warna dan kedudukan, seperti latar belakang: gradien linear (ke bawah, #ffffff, #e0e0e0) atau latar belakang: gradien radial (bulatan, #fffff, #cccccc); 3. Adalah disyorkan untuk menggunakan kecerunan sebagai imej latar belakang, dan bekerjasama dengan atribut latar belakang dan latar belakang; 4. Tambah -webkit- awalan apabila keserasian penyemak imbas dipertimbangkan; 5. Kecerunan berbilang boleh ditapis oleh koma, dan apabila peralihan warna tidak wajar, titik warna pertengahan boleh diselaraskan. Selepas menguasai perkara -perkara utama ini, anda boleh fleksibel mencapai pelbagai kesan kecerunan.

Sebenarnya tidak sukar untuk melaksanakan latar belakang kecerunan dengan CSS, tetapi terdapat beberapa perkara utama yang memerlukan perhatian. Amalan yang paling biasa adalah menggunakan fungsi-fungsi linear-gradient atau radial-gradient untuk menentukan imej latar belakang.

Gradien linear adalah kaedah kecerunan yang paling biasa digunakan

Kecerunan linear adalah kecerunan dari satu arah ke arah yang lain, seperti dari atas ke bawah, dari kiri ke kanan, atau mana -mana sudut. Kaedah penulisan asas ialah:

 Latar Belakang: Linear-Gradient (ke bawah, #ffffff, #e0e0e0);

Arah di sini boleh menjadi kata kunci (seperti to right , to bottom right ) atau nilai sudut (seperti 45deg ). Bahagian warna boleh ditulis dengan pelbagai titik warna, atau anda boleh menambah kedudukan kawalan peratusan:

 Latar Belakang: Linear-Gradient (ke kanan, merah 20%, kuning 50%, hijau 80%);

Kaedah penulisan ini sesuai untuk membuat butang, kad dan reka bentuk lain yang memerlukan hierarki visual.

Radial-Gradient lebih sesuai untuk kesan bulat atau radiasi

Jika anda mahukan kecerunan dengan penyebaran pusat, seperti butang bulat atau kesan halo, anda boleh menggunakan kecerunan radial:

 Latar Belakang: Radial-Gradient (Circle, #FFFFFF, #CCCCC);

Anda juga boleh menyesuaikan bentuk (bulatan atau elips), saiz dan kedudukan:

 Latar Belakang: Radial-Gradient (Ellipse di sebelah kiri atas, putih, hitam);

Contoh ini akan membolehkan kecerunan bermula dari sudut kiri atas dan elips untuk menyebar.

Kecerunan lebih fleksibel untuk digunakan sebagai imej latar belakang

Walaupun ia boleh ditulis secara langsung dalam atribut singkatan background , adalah disyorkan untuk merawat kecerunan sebagai pemprosesan imej:

 Imej latar belakang: Linear-Gradient (ke bawah, #FFF, #eee);
Latar Belakang berulang: tidak berulang;
Latar Belakang: Cover;

Ini menjadikannya lebih mudah untuk bekerjasama dengan atribut latar belakang yang lain, seperti menambah lapisan imej atau saiz tetapan.

• Sekiranya anda ingin bersesuaian dengan penyemak imbas lama, ingatlah untuk menambah -webkit- awalan
• Kecerunan berbilang boleh ditapis oleh koma yang dipisahkan
• Apabila peralihan warna tidak wajar, anda boleh menambah titik warna pertengahan untuk menyesuaikannya.

Pada dasarnya itu sahaja. Dengan menguasai jenis, warna dan jenis fungsi, anda boleh membuat pelbagai latar belakang kecerunan.

Atas ialah kandungan terperinci Melaksanakan kecerunan sebagai latar belakang dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!