Bagaimana untuk menetapkan imej latar belakang untuk elemen badan menggunakan CSS?-tutorial css-php.cn

Bagaimana untuk menetapkan imej latar belakang untuk elemen badan menggunakan CSS?

PHPz

Lepaskan： 2023-09-08 18:33:02

ke hadapan

3397 orang telah melayarinya

Bagaimana untuk menetapkan imej latar belakang untuk elemen badan menggunakan CSS?

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');
}

Salin selepas log masuk

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);">

Salin selepas log masuk

atau

<style>
   body {background-image: url("https://www.tutorialspoint.com/dip/images/einstein.jpg");}
</style>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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 bagi

Contoh

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>

Salin selepas log masuk

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!