Untuk membuat latar belakang web dinamik menggunakan kecerunan, gunakan CSS linear atau gradien radial tanpa imej. Kecerunan linear mengubah warna di sepanjang garis lurus menggunakan fungsi linear-gradient (), seperti latar belakang: gradien linear (ke kanan, #ff9a9e, #fad0c4); untuk kecerunan merah jambu ke peach mendatar. 1) Tentukan arah (contohnya, ke kanan, ke bawah, sudut). 2) Termasuk warna sandaran dan awalan penyemak imbas jika diperlukan. 3) Tambah pelbagai warna berhenti untuk kerumitan. Kecerunan radial menggunakan gradien radial () untuk kesan bulat seperti latar belakang: gradien radial (bulatan, #a18cd1, #fbc2eb);. 4) Laraskan bentuk, saiz, dan kedudukan untuk penyesuaian. Untuk peralihan yang tajam, gunakan perhentian keras seperti latar belakang: gradien linear (ke kanan, putih 50%, hitam 50%);. 5) Kecerunan lapisan dengan koma dalam imej latar belakang untuk reka bentuk lanjutan. Kecerunan berskala, menyokong susun atur responsif, dan meningkatkan kedalaman visual apabila digabungkan dengan imej atau ketelusan.

Kecerunan boleh menjadikan latar belakang web anda lebih dinamik tanpa menambah fail imej. Mereka mudah dikawal dengan CSS dan skala dengan sempurna merentasi saiz skrin.

Cara membuat kecerunan linear asas

Kecerunan linear mengubah warna secara beransur -ansur di sepanjang garis lurus. Anda mentakrifkannya menggunakan fungsi linear-gradient() di dalam background atau sifat background-image .

Contohnya:

 Latar Belakang: Linear-Gradient (ke kanan, #FF9A9E, #FAD0C4);

Ini mewujudkan kecerunan mendatar dari merah jambu ke pic. Arah ( to right ) boleh diubah ke to bottom , sudut seperti 45deg , atau arahan kompas seperti to top left .

Mata Utama:

• Sentiasa sertakan warna sandaran dalam kecerunan kes tidak disokong.
• Gunakan awalan pelayar jika diperlukan untuk sokongan yang lebih lama (walaupun pelayar moden kebanyakannya mengendalikannya).
• Anda boleh menetapkan pelbagai warna berhenti dengan menyenaraikan lebih banyak warna di dalam kurungan.

Kecerunan radial untuk kesan bulat

Kecerunan radial memancar ke luar dari titik pusat. Mereka berguna untuk latar belakang lembut atau kesan sorotan.

Inilah versi mudah:

 Latar Belakang: Radial-Gradient (Circle, #A18CD1, #FBC2EB);

Ini mewujudkan kecerunan bulat bermula dari pusat. Anda boleh menyesuaikan bentuk ( circle atau ellipse ) dan kedudukan (seperti at top left ).

Tweak biasa:

• Tukar Kata Kunci Saiz: closest-side , farthest-corner , dll.
• Tambah ketelusan untuk kesan overlay.
• Gabungkan dengan imej latar belakang untuk kedalaman.

Menambah perhentian keras dan peralihan tajam

Secara lalai, kecerunan menggabungkan dengan lancar. Tetapi kadang -kadang anda mahu perubahan mendadak antara warna - ini adalah di mana warna berhenti berguna.

Cuba:

 Latar Belakang: Linear-Gradient (ke kanan, putih 50%, hitam 50%);

Ini memisahkan latar belakang tepat pada separuh. Anda boleh menggunakan nilai piksel, peratusan, atau menggabungkan beberapa perhentian.

Berguna untuk:

• Corak berjalur
• Susun atur skrin split
• Meniru bayang -bayang atau sorotan

Anda boleh melapisi pelbagai kecerunan dengan memisahkannya dengan koma dalam harta background-image .

Itulah teras menggunakan kecerunan dengan berkesan dalam CSS. Ia tidak rumit, tetapi butiran kecil seperti penempatan warna atau penolakan boleh membuat perbezaan besar.

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