Bagaimanakah Saya Boleh Membuat Regangan Latar Belakang Kecerunan CSS agar Sesuai dengan Keseluruhan Tetingkap Penyemak Imbas Daripada Berulang?

Latar Belakang Kecerunan pada Elemen Badan: Ulang atau Regang?

Dalam reka bentuk web, menggunakan kecerunan CSS untuk latar belakang boleh meningkatkan estetika. Walau bagaimanapun, apabila menggunakan kecerunan pada elemen badan, isu biasa timbul—kecerunan itu berhenti meregang, sebaliknya berulang.

Soalan:

Andaikan dokumen itu kandungan badan mengukur ketinggian 300px. Menetapkan latar belakang kecerunan menggunakan -webkit-gradient atau -moz-linear-gradient menghasilkan kecerunan yang hanya 300px tinggi dan berulang tanpa henti untuk mengisi ruang tetingkap yang tinggal. Adakah terdapat penyelesaian untuk mempunyai regangan kecerunan agar sesuai dengan tingkap dan bukannya berulang?

Jawapannya:

Untuk mencapai kecerunan yang terbentang untuk memenuhi keseluruhan tetingkap, gunakan CSS berikut:

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

• Ketinggian elemen html ditetapkan kepada 100% untuk memastikan ia mengembang kepada keseluruhan ketinggian tetingkap.
• Ketinggian elemen badan juga ditetapkan kepada 100%, menyebabkan ia mengisi ketinggian yang tersedia dalam elemen html.
• margin: 0 ditambahkan untuk mengalih keluar sebarang jarak yang tidak diingini di sekeliling badan.
• latar belakang-ulang: tiada ulangan menghalang kecerunan daripada berulang itu sendiri.
• lampiran latar belakang: tetap mengekalkan kecerunan pada tempatnya semasa tetingkap menatal.

Dengan melaksanakan peraturan CSS ini, latar belakang kecerunan pada elemen badan akan terbentang untuk mengisi ketinggian keseluruhan tingkap, memberikan kesan visual yang lancar dan mengasyikkan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Regangan Latar Belakang Kecerunan CSS agar Sesuai dengan Keseluruhan Tetingkap Penyemak Imbas Daripada Berulang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!