Rumah > Artikel > hujung hadapan web > css menetapkan saiz latar belakang
css menetapkan saiz latar belakang
- 王林asal
- 2023-05-21 12:10:077155semak imbas
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>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>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>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>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!