Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan latar belakang dalam HTML? Analisis ringkas pelbagai kaedah
Bagaimana untuk menetapkan latar belakang dalam HTML? Analisis ringkas pelbagai kaedah
- PHPzasal
- 2023-04-21 11:27:534565semak imbas
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;">
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('image.jpg');">
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('image.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;">
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('image.jpg'); background-repeat: repeat-y;">
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('image.jpg');
background-position: center top;
background-size: auto 100%;
background-repeat: no-repeat;">
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);">
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!