Bagaimanakah Saya Boleh Mencipta Imej Latar Belakang CSS Berskala Responsif Tanpa Isu Pemangkasan atau Penjajaran?

Imej Latar Belakang CSS Responsif dengan Penskalaan Berkadar

Imej latar belakang dalam CSS selalunya sukar untuk digunakan, terutamanya apabila anda mahu ia menskala secara responsif agar sesuai dengan saiz skrin yang berbeza dan mengekalkan nisbah aspek yang betul. Mari kita terokai cara untuk mencapai kesan ini menggunakan sifat bersaiz latar belakang.

Masalah: Isu Pemangkasan dan Penjajaran

Apabila menentukan imej latar belakang dengan latar belakang: url(), anda mungkin menghadapi isu yang berkaitan dengan pemangkasan dan penjajaran. Firefox mungkin mengutamakan penskalaan ketinggian, mengakibatkan pemangkasan menegak, manakala Chrome mungkin memusatkan imej dan bukannya mengulanginya.

Penyelesaian: saiz latar belakang: penutup

Untuk menyelesaikan masalah ini, kami boleh menggunakan harta bersaiz latar belakang bersempena dengan penutup nilai:

body {
    background-image: url(images/background.svg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

Keserasian:
Semak keserasian sifat saiz latar belakang di sini: [Css Tricks](https://css-tricks.com/css3- background-size/)

Menjelaskan kandungan dan penutup

Nilai penutup menskalakan imej latar belakang kepada saiz terkecil yang meliputi sepenuhnya kawasan kedudukan latar belakang, mengekalkan nisbah bidangnya. Ini memastikan bahawa imej memenuhi seluruh ruang tanpa sebarang kawasan kosong atau dipotong.

Sebaliknya, nilai kandungan menskalakan imej kepada saiz terbesar yang sesuai dalam kawasan kedudukan latar belakang sambil mengekalkan nisbah bidangnya. Ini mungkin menyebabkan ruang kosong di sekeliling imej.

Demonstrasi Visual

Pertimbangkan imej 4x3 yang digunakan sebagai latar belakang untuk skrin 16x9.

mengandungi:

• Imej muat di dalam skrin tanpa memotong, tetapi terdapat ruang kosong di atas dan di bawahnya.

kulit:

• Imej diskalakan untuk menutup keseluruhan skrin secara menegak, sambil memotong bahagian tepi.

Untuk demonstrasi yang lebih terperinci, lihat kod yang dipetik ini:

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully contained.</p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image covers all of the div.</p>
</div>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Imej Latar Belakang CSS Berskala Responsif Tanpa Isu Pemangkasan atau Penjajaran?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!