css menetapkan saiz latar belakang
CSS ialah bahasa yang digunakan untuk reka bentuk dan reka letak web, yang boleh mencapai pelbagai gaya dan kesan, termasuk tetapan saiz latar belakang. Saiz latar belakang merujuk kepada saiz dan mod paparan imej latar belakang apabila halaman web dimuatkan. Menetapkan saiz latar belakang dengan betul bukan sahaja boleh meningkatkan keindahan halaman web, tetapi juga meningkatkan pengalaman pengguna. Seterusnya, kami akan menerangkan secara terperinci cara menggunakan CSS untuk menetapkan saiz latar belakang.
1. Gunakan atribut saiz latar belakang
Atribut saiz latar belakang digunakan untuk menetapkan saiz latar belakang. Ia boleh menentukan saiz dan mod paparan imej latar belakang Terdapat tiga nilai yang biasa digunakan: penutup, mengandungi dan px. Khususnya, mereka mewakili masing-masing:
- kulit: Jadikan imej latar belakang sentiasa meliputi keseluruhan kawasan latar belakang, tetapi jika imej lebih kecil daripada kawasan latar belakang, imej akan diregangkan atau dibesarkan secara automatik supaya ia meliputi keseluruhan kawasan latar belakang.
- mengandungi: Jadikan imej latar belakang kelihatan berpusat di kawasan latar belakang sebanyak mungkin tanpa regangan, sambil mengekalkan saiz asalnya.
- px: Tentukan secara langsung saiz imej latar belakang, yang boleh menjadi nilai tetap, peratusan atau auto kata kunci, dengan auto mewakili saiz asal.
Di bawah kami menggunakan beberapa contoh untuk menunjukkan cara menggunakan atribut saiz latar belakang.
- kulit
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: cover;
}
</style>
</head>
<body>
<h1 id="Hello-World">Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>Dalam kod di atas, kami menggunakan imej rawak yang disediakan oleh Lorem Picsum sebagai latar belakang. Dalam CSS, kami menyebarkan imej latar belakang ke seluruh kawasan latar belakang, dan kesannya adalah seperti berikut:
Seperti yang anda lihat, ketinggian imej diregangkan, tetapi lebar juga sepenuhnya Pengekalan menjadikan keseluruhan latar belakang kelihatan lebih cantik.
- mengandungi
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: contain;
}
</style>
</head>
<body>
<h1 id="Hello-World">Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>Dalam kod di atas, kami juga menggunakan imej rawak sebagai latar belakang. Dalam CSS, atribut mengandungi digunakan supaya imej tidak diregangkan, tetapi dipaparkan sebagai berpusat yang mungkin di kawasan latar belakang. Kesannya adalah seperti berikut:
Seperti yang anda boleh lihat daripada kesan gambar, walaupun gambar tidak dapat menutup sepenuhnya kawasan latar belakang, keseluruhan reka bentuk berasa lebih seimbang.
- px
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: 600px;
}
</style>
</head>
<body>
<h1 id="Hello-World">Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>Dalam kod di atas, kami juga menggunakan imej rawak sebagai latar belakang. Dalam CSS, tetapan nilai tetap saiz 600px digunakan dan kesannya adalah seperti berikut:
Seperti yang anda lihat, memandangkan saiz imej terhad kepada 600px, terdapat adalah banyak ruang putih di seluruh kawasan latar belakang. Oleh itu, apabila menggunakan nilai px untuk menetapkan saiz latar belakang, anda perlu melaraskannya mengikut situasi khusus untuk memastikan saiz imej latar belakang boleh diselaraskan dengan keseluruhan halaman.
2. Gunakan atribut kedudukan latar belakang
Selain atribut saiz latar belakang, kita juga boleh menggunakan atribut kedudukan latar belakang untuk menetapkan kedudukan latar belakang. Sifat ini membenarkan imej latar belakang dipusatkan secara mendatar atau menegak dalam kawasan latar belakang, dengan offset yang sepadan. Penggunaan khusus adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('https://picsum.photos/id/100/800/400');
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<h1 id="Hello-World">Hello World!</h1>
<p>这是一段测试文本。</p>
</body>
</html>Dalam kod di atas, kami menetapkan kedudukan tengah, dan kesannya adalah seperti berikut:
Seperti yang anda boleh lihat dari pemaparan, berpusat Kedudukan sejajar bertepatan dengan tengah imej, dan kesan visualnya sangat bagus.
3. Ringkasan
Di atas adalah tentang cara menggunakan CSS untuk menetapkan saiz latar belakang. Dalam pembangunan sebenar, tumpuan pada pengalaman pengguna dan keseluruhan estetika halaman harus menjadi yang paling penting. Melalui tetapan latar belakang yang baik, kami boleh menjadikan halaman web kami lebih menarik dan mencapai kesan reka bentuk yang lebih baik.
Atas ialah kandungan terperinci css menetapkan saiz latar belakang. 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
AI Hentai Generator
Menjana ai hentai secara percuma.
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
1358
52
Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?
Mar 19, 2025 pm 03:58 PM
Artikel ini membincangkan useeffect dalam React, cangkuk untuk menguruskan kesan sampingan seperti pengambilan data dan manipulasi DOM dalam komponen berfungsi. Ia menerangkan penggunaan, kesan sampingan yang biasa, dan pembersihan untuk mencegah masalah seperti kebocoran memori.
Terangkan konsep pemuatan malas.
Mar 13, 2025 pm 07:47 PM
Lazy memuatkan kelewatan memuatkan kandungan sehingga diperlukan, meningkatkan prestasi web dan pengalaman pengguna dengan mengurangkan masa beban awal dan beban pelayan.
Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya?
Mar 18, 2025 pm 01:45 PM
Artikel ini membincangkan kari dalam JavaScript, teknik yang mengubah fungsi multi-argumen ke dalam urutan fungsi argumen tunggal. Ia meneroka pelaksanaan kari, faedah seperti aplikasi separa, dan kegunaan praktikal, meningkatkan kod baca
Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?
Mar 18, 2025 pm 01:44 PM
Fungsi pesanan yang lebih tinggi dalam JavaScript meningkatkan ketabahan kod, kebolehgunaan semula, modulariti, dan prestasi melalui abstraksi, corak umum, dan teknik pengoptimuman.
Bagaimanakah algoritma Rekonsiliasi React berfungsi?
Mar 18, 2025 pm 01:58 PM
Artikel ini menerangkan algoritma perdamaian React, yang dengan cekap mengemas kini DOM dengan membandingkan pokok DOM maya. Ia membincangkan manfaat prestasi, teknik pengoptimuman, dan kesan terhadap pengalaman pengguna. Kira -kira: 159
Bagaimana anda menyambungkan komponen React ke kedai Redux menggunakan Connect ()?
Mar 21, 2025 pm 06:23 PM
Artikel membincangkan penyambungan komponen reaksi ke kedai redux menggunakan Connect (), menerangkan MapStateToprops, MapdispatchToprops, dan kesan prestasi.
Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen?
Mar 19, 2025 pm 03:59 PM
Artikel ini menerangkan USEContext dalam React, yang memudahkan pengurusan negara dengan mengelakkan penggerudian prop. Ia membincangkan faedah seperti keadaan terpusat dan penambahbaikan prestasi melalui pengurangan semula yang dikurangkan.
Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara?
Mar 19, 2025 pm 04:10 PM
Artikel membincangkan menghalang tingkah laku lalai dalam pengendali acara menggunakan kaedah pencegahanDefault (), faedahnya seperti pengalaman pengguna yang dipertingkatkan, dan isu -isu yang berpotensi seperti kebimbangan aksesibiliti.
