Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan imej latar belakang untuk elemen badan menggunakan CSS?
Bagaimana untuk menetapkan imej latar belakang untuk elemen badan menggunakan CSS?
- PHPzke hadapan
- 2023-09-08 18:33:023328semak imbas
CSS (Cascading Style Sheets) ialah alat yang berkuasa untuk mereka bentuk penampilan visual tapak web anda. Sifat background-image ialah salah satu daripada banyak ciri dalam CSS yang digunakan untuk menetapkan imej latar belakang menggunakan sifat imej latar belakang.
Dalam pembangunan web, imej latar belakang adalah bahagian penting dalam reka bentuk keseluruhan tapak web. Latar belakang lalai bagi elemen badan dalam HTML berwarna putih, tetapi dengan hanya beberapa baris kod CSS, anda boleh menukar latar belakang halaman web anda kepada mana-mana imej.
Tetapkan imej latar belakang dalam CSS
Menetapkan imej latar belakang ialah cara terbaik untuk meningkatkan daya tarikan visual tapak web anda dan boleh dilakukan dengan mudah dengan CSS dan elemen badan. Ia mencipta rupa yang unik dan indah yang menambahkan rasa profesional pada tapak web. Di sini, kita akan belajar cara menetapkan imej latar belakang untuk elemen badan menggunakan CSS.
Tatabahasa Asas
Tetapkan imej latar belakang elemen badan melalui CSS menggunakan sintaks berikut:
body {
background-image: url('path to the image.jpg');
}
Sintaks di atas menetapkan imej latar belakang elemen badan kepada imej yang terletak di "path/to/image.jpg". Fungsi url() digunakan untuk menentukan laluan imej.
Gunakan elemen badan untuk menetapkan imej latar belakang
Sekarang, kami akan mempelajari beberapa langkah mudah yang boleh anda ikuti untuk menetapkan imej latar belakang bagi elemen badan supaya tapak web anda lebih menonjol.
Langkah 1: Pilih imej
Sebelum menambah imej latar belakang ke laman web menggunakan elemen badan, kita perlu memilih imej. Imej ini boleh menjadi foto, grafik atau corak.
Langkah 2: Tambahkan imej pada HTML
Dalam langkah ini, tambahkan imej pada kod HTML. Untuk melakukan ini, gunakan kod berikut.
<body style="background-image: url(https://www.tutorialspoint.com/dip/images/einstein.jpg);">
atau
<style>
body {background-image: url("https://www.tutorialspoint.com/dip/images/einstein.jpg");}
</style>
Langkah 3: Menggayakan imej latar belakang menggunakan CSS
Selepas menambah imej pada kod HTML, kami menggayakan imej menggunakan CSS. Gunakan kod berikut untuk melaraskan kedudukan dan saiz imej.
body {
background-size: cover;
background-repeat: no-repeat;
}
Kami menggunakan sifat bersaiz latar belakang untuk menskalakan imej untuk menutup keseluruhan latar belakang, manakala "tidak berulang" memastikan imej tidak berulang.
Langkah 4: Gabungkan kod HTML dan CSS
Terjemahan bahasa Cina bagiContoh
ialah:Contoh
Di sini, kami akan menggabungkan HTML dan CSS untuk menetapkan imej latar belakang
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://www.tutorialspoint.com/dip/images/einstein.jpg');
background-repeat: no-repeat;
background-size: cover;
}
h1,h3{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<h3>Set Background image for the body element</h3>
</body>
</html>
Untuk memperibadikan imej latar belakang lagi, sifat CSS tambahan boleh digunakan seperti kelegapan, kedudukan latar belakang dan lampiran latar belakang.
Kesimpulan
Menetapkan imej latar belakang untuk elemen teks badan tapak web anda ialah cara yang mudah tetapi berkesan. Dengan mengikuti langkah di atas, anda boleh menambahkan imej ke tapak web anda dengan mudah dan menggayakannya mengikut keperluan anda.
Atas ialah kandungan terperinci Bagaimana untuk menetapkan imej latar belakang untuk elemen badan menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!