Kandungan
Menggunakan kod CSS, anda boleh menjana latar belakang bergaris untuk laman web tanpa menggunakan grafik. Kesan ini menggunakan tahap kecerunan CSS dengan pelbagai warna rehat, serta saiz latar belakang untuk membuat vektor kecerunan mengulangi skrin. Cara terbaik untuk melakukan ini adalah dengan memulakan warna latar belakang yang padat dan menjadikan salah satu jalur telus anda untuk warna yang akan diserlahkan. Pengguna yang melawat halaman anda menggunakan pelayar internet lama akan melihat warna pepejal.
Arahan
-
Buka fail helaian gaya CSS dalam Notepad atau dalam program pengeditan kod. Tambah peraturan ini pada akhir fail:
html {ketinggian: 100%; }
Peraturan ini memungkinkan untuk mengisi keseluruhan latar belakang laman web dengan jalur kecerunan yang akan dibuatnya.
-
Tetapkan warna latar belakang untuk halaman anda dalam "html {}" untuk menyediakan warna asas untuk jalur anda dan lalai untuk penyemak imbas lama:
html {ketinggian: 100%; warna latar belakang: hitam; }
-
Tambah kod berikut kepada lalai anda "html {}" untuk membuat kesan jalur mendatar:
latar belakang-imej: linier-kecerunan (telus 50%, putih 50%);
Ia akan mewujudkan dua rehat warna, yang pertama menjadi telus dan yang kedua berwarna putih. Setiap gangguan warna mengambil 50% ruang kecerunan pada skrin. Laraskan lebar jalur dengan menukar nilai peratusan.
-
Tambah nilai sifar untuk memecahkan warna pertama dan sisihkannya dengan koma:
Latar belakang-imej: linear-gradient (0, telus 50%, 50% hitam);
Ini akan meletakkan jalur anda secara menegak, bukannya meletakkannya secara mendatar.
-
Duplikasi sifat imej latar belakang dan nilai-nilainya dalam barisan baru. Lakukan ini dua kali, mewujudkan tiga baris dengan kod yang sama. Tambah awalan "-moz" ke kecerunan linier dalam salah satu baris pendua kod. Tambah awalan "-webkit" ke baris pendua yang lain:
latar belakang-imej: linear-gradient (0, telus 50%, 50% putih); latar belakang-imej: -moz-linear-kecerunan (0, telus 50%, putih 50%); background-image: -webkit-linear-gradient (0, telus 50%, 50% putih);
-
Hadkan kecerunan kepada sejumlah piksel tertentu dengan menetapkan saiz latar belakang dalam baris seterusnya dalam kod CSS anda:
saiz latar belakang: 20px;
Tukar bilangan piksel saiz latar belakang untuk mengubah suai saiz kecerunan. Oleh kerana pengulangan berterusan kecerunan lebar halaman, setiap pengulangan akan sesuai dengan satu set jalur pada skrin.
Arahan
Notis
- Beberapa pelayar lama tidak menyokong kecerunan CSS3. Apabila anda ingin memaparkan jalur untuk semua jenis penyemak imbas, gunakan ulasan bersyarat untuk memasukkan helaian gaya dengan carta yang berulang.