Menetapkan GIF ' Format Pertukaran Grafik ” sebagai imej latar belakang menambah elemen visual yang menarik pada reka bentuk. GIF membolehkan pembangun menyampaikan maklumat atau menyerlahkan produk atau perkhidmatan yang membantu dalam mencipta identiti visual jenama. Walau bagaimanapun, pembangun mesti memastikan bahawa penggunaan GIF tidak mengatasi halaman web atau mengalih perhatian pengguna daripada kandungan utama.

Artikel ini menunjukkan prosedur menetapkan GIF sebagai imej latar belakang pada halaman web.

Bagaimana untuk Tetapkan GIF sebagai Imej Latar Belakang pada Halaman Web?

Menetapkan GIF sebagai imej latar belakang membantu dalam mencipta elemen yang menarik perhatian dengan menambahkan elemen visual.

GIF amat berguna pada tapak web yang ingin menyampaikan rasa keseronokan atau kegilaan, atau pada halaman yang ingin menyerlahkan produk atau ciri tertentu. Untuk menetapkannya, sebagai imej latar belakang, lawati contoh berikut:

Contoh 1: Menetapkan GIF sebagai Latar Belakang Tetap

Memandangkan elemen HTML yang membantu dalam membina kandungan halaman web diletakkan di dalam ' ” tag. Itulah sebabnya, memilih ' badan ” elemen dan menggunakan sifat CSS padanya. Ia memberi kesan kepada semua elemen HTML yang mengandungi ' ” tag.

Sebagai contoh, '

” dan “

tag ” digunakan sebagai kandungan halaman web. Lihat coretan kod di bawah:

< badan >
< h1 > Menetapkan GIF sebagai Imej Latar Belakang Pada Halaman h1 >
< hlm > GIF ini telah ditambah sebagai imej latar belakang pada keseluruhan halaman menggunakan 'imej latar belakang' Harta benda. Artikel ini telah dikuasakan oleh Linuxhint. hlm >
badan >

Sekarang, pilih elemen HTML 'badan' di dalam ' teg ' atau dalam ' yang berasingan ' CSS ” fail untuk menggunakan penggayaan pada halaman web:

badan {
imej latar belakang: url ( 'sea.gif' ) ;
background-repeat: tiada-ulang;
saiz latar belakang: penutup;
padding:50px;
saiz fon: x-besar;
warna: putih;
}

Dalam blok kod di atas:

• • Pertama, ' url() Kaedah ' digunakan yang menyimpan laluan ' GIF ” fail. Dan kaedah ini diluluskan sebagai nilai kepada CSS ' imej latar belakang ” harta benda.
  • Seterusnya, tetapkan “ tidak berulang ' sebagai nilai kepada CSS ' latar belakang-ulang ” harta untuk pengulangan fail GIF.
  • Kemudian, tetapkan nilai “ penutup 'kepada CSS' saiz latar belakang ” harta untuk menampung semua ruang yang ada
  • Selepas itu, berikan nilai “ 50px ” dan “ x-besar 'kepada CSS' padding ” dan “ Saiz huruf ” hartanah, masing-masing. Ini menambah jarak di sekeliling teks dan membesarkan saiz fon.

Selepas penyusunan, halaman web kelihatan seperti ini:

Output di atas menunjukkan bahawa gif telah ditambahkan sebagai latar belakang pada halaman web.

Contoh 2: Menetapkan GIF sebagai Latar Belakang Boleh Tatal

Pada mulanya, buat struktur HTML untuk membuat kandungan Halaman Web seperti ini:

< div kelas = 'contai' >
< h1 > Menetapkan GIF sebagai Imej Latar Belakang Pada Halaman h1 >
< hlm > GIF ini telah ditambah sebagai imej latar belakang pada keseluruhan halaman menggunakan 'imej latar belakang' Harta benda. Artikel ini telah dikuasakan oleh Linuxhint. hlm >
div >

< div >
< h3 gaya = 'warna:putih;' > Kandungan yang ditulis di luar 'div' unsur h3 >
div >

Dalam kod di atas:

• • Pertama, ibu bapa '
    tag ' digunakan dengan kelas ' mengandungi ”.
  • Seterusnya, gunakan ' h1 ” dan “ hlm ” Elemen HTML dan menyediakan kandungan tiruan kepada mereka.
  • Selepas itu, buat satu lagi '
    ” dan gunakan “

    teg ” dengan memberikan data palsu kepadanya.

Sekarang, tambah GIF sebagai latar belakang pada halaman web dengan memasukkan sifat CSS berikut:

.contai {
imej latar belakang: url ( laut.gif ');
background-repeat: tiada ulang;
saiz latar belakang: penutup;
ketinggian: 100vh;
paparan: flex;
align-item: tengah;
justify-content: pusat;
flex-direction: lajur;
warna: putih;
saiz fon: besar;
text-align: tengah;
padding: 2rem;
}

Perihalan blok kod yang digunakan di atas:

• • Mula-mula, tetapkan ' laluan imej ”, “ tidak berulang t” dan “ penutup ' sebagai nilai kepada CSS ' imej latar belakang ”, “ latar belakang-ulang ” dan “ saiz latar belakang ” hartanah, masing-masing.
  • Seterusnya, tetapkan nilai “ 100vj ” dan “ lentur 'kepada CSS' ketinggian ” dan “ paparan ” hartanah.
  • Selepas itu, gunakan CSS ' warna ”, “ Saiz huruf ”, “ penjajaran teks ” dan “ padding ” sifat untuk menggunakan penggayaan pada kandungan.

Selepas tamat proses penyusunan, halaman web kelihatan seperti ini:

Output memaparkan bahawa ' GIF ” telah dimasukkan sebagai imej latar belakang pada keseluruhan halaman.

Kesimpulan

Untuk menetapkan GIF sebagai imej latar belakang pada halaman web, CSS ' imej latar belakang 'harta benda digunakan pada HTML' badan ” unsur. Sifat CSS yang digunakan pada elemen 'badan' digunakan secara automatik pada semua elemen yang mengandungi. Dengan menetapkan ' 100vj ” sebagai nilai kepada sifat ketinggian, kesan menatal juga boleh didayakan. Ia membolehkan gif latar belakang bergerak sepanjang skrol. Artikel ini telah menunjukkan cara untuk menetapkan GIF sebagai imej latar belakang pada halaman web.