Bagaimana cara menggunakan CSS untuk mencapai kesan kecerunan peralihan warna latar belakang dari kiri ke kanan dan secara beransur -ansur menjadi lebih ringan dari atas ke bawah?

Buat latar belakang progresif: kecerunan CSS dari kiri ke kanan, dari jauh ke cetek

Artikel ini akan menunjukkan cara membuat kesan latar belakang yang unik menggunakan CSS: kecerunan yang lancar peralihan dari kiri ke kanan, dan atas dasar ini, secara beransur -ansur menyala dari atas ke bawah. Reka bentuk ini boleh menambah lapisan dan kedalaman ke laman web dan meningkatkan pengalaman pengguna.

Untuk mencapai kesan ini, anda perlu menggabungkan teknologi kecerunan dan pelekat CSS. Kami menggunakan harta mask-image , yang digabungkan dengan topeng kecerunan menegak, untuk mengawal ketelusan kecerunan.

Kod CSS berikut akan mencapai kesan sasaran:

 html, badan {
    Lebar: 100%;
    Ketinggian: 100%;
}

html {
    latar belakang warna: #fffff; /* Menyediakan latar belakang putih*/
}

badan {
    -WebKit-Mask-Image: Linear-Gradient (ke bawah, #000000, telus); /* Topeng menegak, mendalam, bawah cahaya*/
    Latar Belakang: Linear-Gradient (ke kanan, RGB (39, 121, 245), RGB (81, 221, 240), RGB (118, 216, 118)); /* kecerunan mendatar, kiri dan kanan cetek*/
    Latar Belakang berulang: tidak berulang; /* Mencegah pertindihan kecerunan*/
}

Penjelasan kod:

• html, body : Tetapkan lebar dan ketinggian elemen html dan body hingga 100%, memastikan latar belakang meliputi keseluruhan halaman.
• html { background-color: #ffffff; } : Tetapkan latar belakang putih untuk elemen html sebagai warna latar belakang untuk kecerunan.
• body { -webkit-mask-image: ... } : Gunakan harta -webkit-mask-image untuk memohon topeng kecerunan linear dari atas ke bawah ( to bottom ). Peralihan kecerunan dari hitam ( #000000 ) ke telus ( transparent ), mencapai kesan secara beransur -ansur menjadi lebih ringan dari atas ke bawah. Nota: -webkit- Awalan adalah untuk keserasian dengan pelayar yang lebih tua.
• body { background-image: ... } : mentakrifkan warna latar belakang kecerunan linear dari kiri ke kanan ( to right ), peralihan warna dari biru gelap ( rgb(39, 121, 245) ) untuk cahaya hijau ( rgb(118, 216, 118) ), dan warna tengah adalah rgb(81, 221, 240)
• body { background-repeat: no-repeat; } : Mencegah kecerunan latar belakang daripada mengulangi.

Melalui kod CSS di atas, anda boleh dengan mudah membuat kesan latar belakang progresif dengan rasa lapisan dan kesan visual. Teknologi ini mempunyai pelbagai aplikasi dalam reka bentuk web dan sangat sesuai untuk senario di mana bidang utama perlu diserlahkan atau suasana tertentu dicipta.

Atas ialah kandungan terperinci Bagaimana cara menggunakan CSS untuk mencapai kesan kecerunan peralihan warna latar belakang dari kiri ke kanan dan secara beransur -ansur menjadi lebih ringan dari atas ke bawah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!