hujung hadapan web
tutorial css
Bagaimana untuk menetapkan imej latar belakang untuk elemen badan menggunakan CSS?
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');
}
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 id="Welcome-to-TutorialsPoint">Welcome to TutorialsPoint</h1>
<h3 id="Set-Background-image-for-the-body-element">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!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Vue 3
Apr 02, 2025 pm 06:32 PM
Ia ' s! Tahniah kepada pasukan Vue untuk menyelesaikannya, saya tahu ia adalah usaha besar dan lama datang. Semua dokumen baru juga.
Membina aplikasi Ethereum menggunakan redwood.js dan fauna
Mar 28, 2025 am 09:18 AM
Dengan pendakian harga bitcoin baru -baru ini lebih dari 20k $ USD, dan baru -baru ini melanggar 30k, saya fikir ia patut mengambil menyelam yang mendalam kembali ke dalam mewujudkan Ethereum
Bolehkah anda mendapatkan nilai harta CSS yang sah dari penyemak imbas?
Apr 02, 2025 pm 06:17 PM
Saya mempunyai seseorang yang menulis dengan soalan yang sangat legit ini. Lea hanya blog tentang bagaimana anda boleh mendapatkan sifat CSS yang sah dari penyemak imbas. That ' s seperti ini.
Kad yang disusun dengan kedudukan melekit dan sasaran sass
Apr 03, 2025 am 10:30 AM
Pada hari yang lain, saya melihat sedikit ini sangat indah dari laman web Corey Ginnivan di mana koleksi kad timbunan di atas satu sama lain semasa anda menatal.
Menggunakan Markdown dan Penyetempatan di Editor Blok WordPress
Apr 02, 2025 am 04:27 AM
Jika kita perlu menunjukkan dokumentasi kepada pengguna secara langsung dalam editor WordPress, apakah cara terbaik untuk melakukannya?
Membandingkan penyemak imbas untuk reka bentuk responsif
Apr 02, 2025 pm 06:25 PM
Terdapat beberapa aplikasi desktop ini di mana matlamat menunjukkan laman web anda pada dimensi yang berbeza pada masa yang sama. Oleh itu, anda boleh menulis
Kenapa kawasan -kawasan yang dikurangkan ungu di susun atur flex tersilap dianggap sebagai 'ruang limpahan'?
Apr 05, 2025 pm 05:51 PM
Soalan mengenai kawasan slash ungu dalam susun atur flex Apabila menggunakan susun atur flex, anda mungkin menghadapi beberapa fenomena yang mengelirukan, seperti dalam alat pemaju (D ...
