Bagaimana untuk menetapkan latar belakang dalam HTML? Analisis ringkas pelbagai kaedah-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan latar belakang dalam HTML? Analisis ringkas pelbagai kaedah

PHPz

Lepaskan： 2023-04-21 11:33:56

asal

4589 orang telah melayarinya

Dalam reka bentuk web, menetapkan latar belakang adalah kemahiran yang sangat asas. Dalam HTML, kita boleh menetapkan latar belakang halaman dalam pelbagai cara, termasuk latar belakang warna pepejal, latar belakang gambar, latar belakang berulang, latar belakang berjubin, latar belakang kecerunan, dsb. Di bawah ini saya akan memperkenalkan cara menggunakan kaedah ini untuk menetapkan latar belakang halaman HTML.

Latar belakang warna pepejal

Latar belakang warna pepejal ialah jenis latar belakang yang paling mudah Anda hanya perlu menetapkan atribut warna latar belakang HTML. Contohnya:

<body style="background-color: #f2f2f2;">

Salin selepas log masuk

Di mana, #f2f2f2 ialah kod warna perenambelasan, mewakili kelabu muda. Anda boleh mendapatkan lebih banyak kod warna di sini: https://htmlcolorcodes.com/.

Latar belakang gambar

Dalam HTML, kita boleh menggunakan gambar sebagai latar belakang halaman. Anda boleh terus menggunakan teg img untuk mencapai ini, tetapi berbuat demikian boleh menjejaskan kelajuan pemuatan halaman, jadi disyorkan untuk menggunakan CSS untuk menetapkan imej latar belakang. Contohnya:

<body style="background-image: url(&#39;image.jpg&#39;);">

Salin selepas log masuk

Di mana, image.jpg ialah imej yang anda ingin tetapkan sebagai latar belakang. Ambil perhatian bahawa imej perlu diletakkan dalam direktori yang sama dengan fail HTML. Anda boleh menggunakan laluan relatif atau mutlak untuk menentukan lokasi imej. Anda juga boleh menambah atribut lain, seperti kod berikut untuk menetapkan kedudukan imej untuk ditengahkan dan tidak berulang:

<body style="background: url(&#39;image.jpg&#39;) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;">

Salin selepas log masuk

Atribut penutup di sini akan melaraskan saiz imej secara automatik agar sesuai dengan saiz halaman . Jika anda tidak mahu imej itu diregangkan dan cacat, anda boleh menggunakan kandungan dan bukannya penutup.

Latar belakang ulang

Tetapkan latar belakang berulang untuk membolehkan imej kecil dijubin secara berterusan untuk memenuhi keseluruhan halaman, dengan itu mengurangkan saiz imej dan meningkatkan kelajuan halaman. Dalam CSS, gunakan repeat atau repeat-x atau repeat-y untuk menetapkan cara imej berulang. Contohnya:

<body style="background-image: url(&#39;image.jpg&#39;); background-repeat: repeat-y;">

Salin selepas log masuk

Latar belakang jubin

Menggunakan latar belakang jubin membolehkan gambar atau warna dijubin sehingga memenuhi keseluruhan latar belakang halaman. Dalam CSS, gunakan sifat saiz latar belakang dan kedudukan latar belakang untuk mengawal kedudukan dan saiz imej atau warna. Contohnya:

<body style="background-image: url(&#39;image.jpg&#39;); 
    background-position: center top; 
    background-size: auto 100%;
    background-repeat: no-repeat;">

Salin selepas log masuk

Auto dan 100% di sini bermaksud melaraskan lebar secara automatik, manakala ketinggian ialah 100%.

Latar belakang kecerunan

Menggunakan latar belakang kecerunan boleh menjadikan halaman kelihatan lebih bergaya. Dalam CSS, anda boleh menggunakan kecerunan linear atau kecerunan jejari untuk mencipta kecerunan rata atau jejari. Contohnya:

<body style="background: linear-gradient(to right, #f2f2f2, #ffffff);">

Salin selepas log masuk

Di sini, ke kanan digunakan untuk menunjukkan bahawa arah kecerunan adalah dari kiri ke kanan, dan #f2f2f2 dan #ffffff ialah nilai warna titik permulaan dan penamat.

Ringkasan

Terdapat banyak cara untuk menetapkan latar belakang halaman HTML, termasuk latar belakang warna pepejal, latar belakang gambar, latar belakang berulang, latar belakang berjubin dan latar belakang kecerunan. Melalui kaedah ini, anda boleh menambah gaya dan ciri yang berbeza pada tapak web anda.

Atas ialah kandungan terperinci Bagaimana untuk menetapkan latar belakang dalam HTML? Analisis ringkas pelbagai kaedah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!